Bonjour à tous
Je suis en train d'essayer de faire mumuse avec du CSS et du javascript pour une page d'acceuil.
J'explique rapidement :
J'ai une image composé de 5 cubes.
Je souhaite, au passage de souris sur chaque cube, que
1/ l'image change (c ok)
2/ Un menu différent pour chaque cube s'affiche sur la gauche
Pour faire cela je pensais faire mes 5 div de menu, les mettre en visibility:hidden et les passer en visible au passage de souris.
Ce qui m'embete dans mon raisonement est que les 5 menus ont exactement le même placement CSS mais uniquement un texte à l'intérieur qui change...
Et pour le moent je n'ai rien trouvé de plus intelligent que de repeter 5 fois le meme div.
Malheureusement, uniquement le premier menu (dans l'ordre du code HTML s'affiche)
Je vous montre un peu ce que ça donne :
Javascript
var ima=new Array(5); // création d'1 tableau d'objets Image
for (var i=0;i<5;i++) {
ima[i]=new Image();
ima[i].src='images/gravure_'+i+'.jpg';
}
function flip(n) //Pour changer les images {
document.images['gravure'].src='images/gravure_'+n+'.jpg';
}
function showmenu(n) {
if(document.getElementById)
document.getElementById('menu_'+n+'').style.visibility = 'visible';
}
function closemenu(n) {
if(document.getElementById)
document.getElementById('menu_'+n+'').style.visibility = 'hidden';
} |
<map name="map_gravure" id="map_gravure">
<area shape="rect" coords="143,40,237,113" href="#" alt="compagnie" onMouseOver="flip(1);showmenu(1);" onMouseOut="flip(0);closemenu(1);" />
<area shape="rect" coords="106,142,216,225" href="#" alt="spectacles" onMouseOver="flip(2);showmenu(2);" onMouseOut="flip(0);closemenu(2);" />
</map>
<img src="images/gravure_0.jpg" name="gravure" alt="La compagnie du sarment" align="middle" usemap="#map_gravure" id="map_gravure" />
<div id="menu_2">
<p>spectacle 1</p>
<p>spectacle 2</p>
</div>
<div id="menu_1">
<p>la compagnie<p>
<p>sarment mag</p>
<p>parcours</p>
</div> |
Et dans ce cas il n'y aura que le menu 2 qui s'affiche.
Je précise encore que les #menu_1 et "menu_2 sont (et c une bétise) strictement identique. Mais je ne sais aps comment distinguer le texte à l'intérieur autrement.
Voici ce que je suis en train de tester (il n'y a que les 2 cubes de gauche fonctionnel)
Merci beaucoup à vous 
Message édité par Jinroh le 01-02-2006 à 23:10:50
---------------
Galerie photos
![[:urd]](https://forum-images.hardware.fr/images/perso/urd.gif "[:urd]")