Affichage d'images au survol de la souris

**Spirit94** · 23/04/2014, 01h12

Bonsoir,
Je suis entrain de créer l'organigramme d'une association avec la fonction des membres dans un cadre et dessous, une bulle avec le nom de ce membre qui s'affiche directement lorsque qu'on arrive sur cette page.
Donc j'ai fait avec Photoshop, un genre de labyrinthe ( enfin je trouve pas les mots pour expliquer çà, mais je vais vous montre en image ) avec la fonction de chaque membre.
Donc je vais afficher cette page en fond dans mon bloc et çà donne çà :
Nom : organigramme membres bureau sans les bulles 1.PNG
Affichages : 1579
Taille : 139,7 Ko

Nom : organigramme membres bureau sans les bulles 1.PNG
Affichages : 1579
Taille : 139,7 Ko

J'ai ensuite fait deux images :
1 bulle dans laquelle il y a le nom de ce membre et une 2ème bulle de même taille qui affichera la photo de ce membre dans cette seconde bulle au passage de la souris.
Pièce jointe 143718 Pièce jointe 143719
AU final, mon organigramme devrait ressembler à çà avant le passage de la souris sur les bulles:
Pièce jointe 143720

Mais je rencontre un soucis.
1- J'ai placé mon organigramme sans les bulles et lorsque je mets mon code, les bulles n'apparaissent pas (Pour l'instant je suis qu'aux premières bulles avec les noms avant le passage de la souris.
Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="corps">
		<div class="corps-haut">
		</div>	
			<div class="corps-central"> 
				<img src="images/logo_fleur/logo_fleur1.png" class="logo_fleur1" alt="logo_fleur1" title="logo_fleur1"/>
				<p class="titre_rouge1">ORGANIGRAMME DE L'ASSOCIATION</p>
 
					<div class="boite1_haut">
					</div> 
					<div class="boite1_centre"> 
						<div class="position_landry_r">
						<img src="images/images_membres_bureau/landry1.png" alt="Photo_Président_d'honneur" onmouseover="javascript:this.src='images/images_membres_bureau/landry2.jpg';"     onmouseout="javascript:this.src='images/images_membres_bureau/landry1.png';" />
					        </div>										
			               </div> 
                                       <div class="boite1_bas"> 
				       </div> 											
			</div> 			
		<div class="corps-bas"
		</div>	
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
#corps
{
   float: left;
}
.corps-haut
{
   width: 973px;
   height: 24px;
   margin-left: 15px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 5px;
   background-image: url(images/corps/bord_haut_corps6.png);
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  
.corps-central
{
   overflow: auto;
   width: 973px;
   margin-left: 15px; 
   margin-top:-1px;
   background-image: url(images/corps/corps_gris/cadre_centre_pour_album2.png);
   background-repeat: repeat-y;
   margin-bottom: 0px;
  }  
 
.corps-bas
{ 
   width: 974px;
   height: 24px;
   margin-left: 15px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   padding-top: 0px;
   background-image: url(images/corps/bord_bas_corps4.png);
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }
 
 #boite1
{
   float: left;
}
.boite1_haut
  {
   width: 900px;
   height: 29px;
   margin-left: 27px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right: 0px;
   margin-top: 50px;
   background-image: url("images/corps/partie_rouge/bordure_noire_haute_partie_rouge3.jpg");
   background-repeat: no-repeat;
 }  
.boite1_centre
  {
    width: 830px;
   height: 1600px;
    margin-left: 95px;
   margin-top: -170px;
   border: none;
   padding-bottom: 35px;
   background-image: url("images/images_membres_bureau/labyrinthe1.png");
}  
 
.position_landry_r
{
  float: left;
  padding-top: 265px;
  margin-left: 565px;
}

Merci à vous de m'éclairez sur ce qui ne vas pas. mon problème est pour l'instant que mon image 1 n'apparait pas.

**Bisûnûrs** · 23/04/2014, 07h31

Y a des chances pour que ce soit un problème de chemin de ton image. Vérifie que le chemin depuis ton fichier HTML est correct.

**Spirit94** · 23/04/2014, 19h52

Bonjour Bisunurs

je te remercie de ta contribution.

J'ai regardé et j'ai trouvé mon erreur, t'as vu juste : C'est sur le nom de l'image. J'ai confondu le -"" et "_".

merci à toi.

Cependant, je voulais savoir si pour les bulles, il n'était pas mieux de mettre des z-index ?

**Spirit94** · 23/04/2014, 21h14

Bonsoir,
Maintenant que mon image s'affiche, j'ai un problème d'affichage et de décalage selon les navigateurs. Je travaille généralement sous Firefox Moz.
Donc j'ai fais mon codage CSS et ajuster jusqu'à ce qu'il affiche bien sous Firefox.
Mais lorsque je teste sous Internet explorer et Goocgle Chrome, les affichages sont différents avec divers décalage selon les navigateurs.
AFFICHAGE SOUS FIREFOX MOZ :
Pièce jointe 143839
AFFICHAGE SOUS INTERNET EXPLORER :
Pièce jointe 143842
AFFICHAGE SOUS GOOGLE CHROME :
Pièce jointe 143841

Voici mon code Html concernant ces images ( Bulles ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="boite1_haut"></div> 
<div class="boite1_centre"> 
	<div class="position_quinot">
	       <img src="images/images_membres_bureau/quinot_1.png" alt="Photo_Président_d'honneur" onmouseover="javascript:this.src='images/images_membres_bureau/quinot_2.jpg';" onmouseout="javascript:this.src='images/images_membres_bureau/quinot_1.png';" />
	</div>
	<div class="position_terlon_p">
		<img src="images/images_membres_bureau/terlon_p_1.png" alt="Photo_Président_d'honneur" onmouseover="javascript:this.src='images/images_membres_bureau/terlon_p_2.jpg';" onmouseout="javascript:this.src='images/images_membres_bureau/terlon_p_1.png';" />
	</div>
	<div class="position_landry_r">
		 <img src="images/images_membres_bureau/landry_1.png" alt="Photo_Président_d'honneur" onmouseover="javascript:this.src='images/images_membres_bureau/landry_2.jpg';" onmouseout="javascript:this.src='images/images_membres_bureau/landry_1.png';" />
	</div>																									
</div>
<div class="boite1_bas"></div>

Voici mon code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#boite1{
   float: left;
}
.boite1_haut  {
   width: 900px;
   height: 29px;
   margin-left: 27px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right: 0px;
   margin-top: 50px;
   background-image: url("images/corps/partie_rouge/bordure_noire_haute_partie_rouge3.jpg");
   background-repeat: no-repeat;
 }  
.boite1_centre{
   width: 830px;
   height: 1600px;
   margin-left: 95px;
   margin-top: -170px;
   border: none;
   padding-bottom: 35px;
   background-image: url("images/images_membres_bureau/labyrinthe1.png");
}  
 .position_quinot_f{
  float: left;
  padding-top: 275px;
  margin-left: 65px;
}
.position_terlon_p{
  float: left;
  padding-top: 329px;
  margin-left: -460px;
}
.position_landry_r{
  float: left;
  margin-top: -120px;
  margin-left: 579px;
}

**rodolphebrd** · 23/04/2014, 21h26

Bonjour,

il existe des reset css légers pour harmoniser les différences entre navigateurs.

**NoSmoking** · 23/04/2014, 21h44

Bonjour,
perso avec une image de fond en px je ne vois pas l'intérêt de se casser la tête avec des float:left en pagaille et des margin négatif pour recaler.

Il me semble plus judicieux de passer par un positionnement en absolute dans ce cas.

Au passage
onmouseover="javascript:this.src='images/images_membres_bureau/terlon_p_2.jpg';" est a écrire
onmouseover="this.src='images/images_membres_bureau/terlon_p_2.jpg';", les événements attendant du javascript.

**Spirit94** · 23/04/2014, 23h32

Bonsoir à vous.
Rodolphe, pour palier ces décalages, j'ai utilsé le z-index et c'est nickel sous ces 3 navigateurs.
Voila mon code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.position_quinot_f
{
  position: absolute;
  z-index:1;
  margin-top: 275px;
  margin-left: 304px;
}
.position_terlon_p
{
  position:absolute;
  z-index:2;
  margin-top: 345px;
  margin-left: 28px;
}
.position_landry_r
{
  position:absolute;
  z-index:3;
  margin-top: 345px;
  margin-left: 579px;
}
.position_ferjul_g
{
  position:absolute;
  z-index:4;
  margin-top: 723px;
  margin-left: 47px;
}
.position_yove_jp
{
  position:absolute;
  z-index:5;
  margin-top: 723px;
  margin-left: 323px;
}
.position_narcisse_j
{
  position:absolute;
  z-index:6;
  margin-top: 723px;
  margin-left: 596px;
}

NoSmoking, les deux fonctionnes concernant le : onmouseover="this.src='images/images_membres_bureau/terlon_p_2.jpg';"
Tu me conseilles donc d'écrire plutôt comme tu me l'as indiqué, Ok, je modifie, mais c'est quoi la différence entre les deux ? Car je n'en vois pas.

Merci à vous.

**Bisûnûrs** · 24/04/2014, 08h48

NoSmoking a supprimé javascript: dans le code, qui est inutile. En effet, quand tu es dans un évènement onmouseover, tu es déjà en train d'exécuter du Javascript, il est inutile de le préciser.

**Spirit94** · 24/04/2014, 14h21

Bonjour, ok merci pour l'explication.
J'ai modifié ça pour toutes les photos.
La avec les z-index je n'ai plus de soucis de decallage.

Affichage d'images au survol de la souris

HTML

Discussions similaires

Partager

Partager