afficher une image en javascript en passant sur un menu
Bonjour,
J'ai utilisé le script JavaScript afficher/cacher,
car je souhaite, grâce à un menu en passant ma souris
dessus (survole) afficher une image dans une autre div que celle du menu,
mais comme étant débutant je n'arrive pas à faire ce que je veux.
J'arrive à afficher l'image quand je survole le menu, mais je ne souhaite pas que l'image se masque quand je quitte le survole.
Et quand je passe sur l'autre élément de menu au survole que l'autre image s'affiche et reste afficher tant que je ne suis pas allé sur un autre élément de menu et ainsi de suite.
voila mon code et merci de votre aide.
Code:
1
2
3
4
5
6
7
8
| <script type="text/javascript">
function affiche(elem){
document.getElementById(elem).style.visibility="visible";
}
function masque(elem){
document.getElementById(elem).style.visibility="hidden";
}
</script> |
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
|
<div id="content">
<!-- La, c'est ce qui s'affichera au survole-->
<div id="texte_icone_a">
<img src="images/page_t3d12.jpg" alt="accueil camion T3d12"/>
</div>
<!--texte_icone_a-->
<div id="texte_icone_b">
<img src="images/page_t3d16.jpg" alt="camion T3d16"/>
</div>
<!-- et tu fais pareil avec icone-b et ainsi de suite...-->
</div>
<ul id="menu">
<li id="icone_a" onMouseOver="javascript:affiche('texte_icone_a')"; onMouseOut="javascript:masque('texte_icone_a')";><a href="#" class="accueil" rel="shadowbox[Mixed]"; title="accueil ">T3D12</a></li><!--icone_a-->
<li id="icone_b" onMouseOver="javascript:affiche('texte_icone_b')"; onMouseOut="javascript:masque('texte_icone_b')";><a href="#" class="savoir-faire" rel="shadowbox[Mixed]"; title="accueil ">T3D16</a></li><!--icone_b-->
<li id="icone_c" onMouseOver="javascript:affiche('texte_icone_c')"; onMouseOut="javascript:masque('texte_icone_c')";><a href="#" class="telechargement" rel="shadowbox[Mixed]"; title="accueil ">ÉTUDE DE
CARROSSAGE</a></li><!--icone_c-->
<li id="icone_d" onMouseOver="javascript:affiche('texte_icone_d')"; onMouseOut="javascript:masque('texte_icone_d')";><a href="#" class="references" rel="shadowbox[Mixed]"; title="accueil ">SERVICES</a></li><!--icone_d-->
<li id="icone_e" onMouseOver="javascript:affiche('texte_icone_e')"; onMouseOut="javascript:masque('texte_icone_e')";><a href="#" class="services" rel="shadowbox[Mixed]"; title="accueil ">DOCUMENTS
À TÉLÉCHARGER</a></li><!--icone_e-->
<li id="icone_f" onMouseOver="javascript:affiche('texte_icone_f')"; onMouseOut="javascript:masque('texte_icone_f')";><a href="#" class="contact" rel="shadowbox[Mixed]"; title="accueil ">BOUTIQUE</a></li><!--icone_f-->
</ul> |
merci merci:ccool:
