1 pièce(s) jointe(s)
Affichage d'images au survol de la souris
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 çà :
Pièce jointe 143717
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 143718Piè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:
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:
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.
