Réaliser un rollover sur un menu (html)

le fonctionnement

Tout d'abord, il vous faut découper votre menu de façon à faire votre rollover. C'est-à-dire, obtenir le nombre d'images requises, soit une image avec aucun élément sélectionné et une image par élément de menu sélectionné. Si vous avez cinq éléments dans votre menu, vous devez avoir six images. Prenons un menu d'exemple. Voici les images (de même taille absolument!) que j'obtiens:


Une fois que vous avez toutes vos images, prenez le logiciel [url=tut_imapic.php">imapic[/url] et créez votre menu réactif à partir de votre image vierge, celle qui n'a aucun élément de menu sélectionné. Vous obtiendrez alors un code simplifié qui ressemble à ceci.

Code:

<map name="menu">
<area shape="rect" coords="457,0,540,77" href="news.php" />
<area shape="rect" coords="541,0,624,77" href="michelle.php" />
<area shape="rect" coords="625,0,709,77" href="gallery.php" />
<area shape="rect" coords="710,0,794,77" href="style.php" />
<area shape="rect" coords="795,1,878,77" href="web.php" />
</map>

Commençons à implanter le rollover. Associez votre map réactive à votre image, comme vous l'avez appris dans le [url=tut_imapic.php">tutoriel de imapic[/url]. Nous allons également y insérer un paramètre supplémentaire, soit id="aab".

Code:

<img src="image.jpg" border="0" usemap="#menu" id="aab">

Il fait aussi insérer du code supplémentaire dans chaque élément de l'image réactive. Ce code permet de faire afficher une autre image lors du passage de la souris et de revenir à l'image de base lorsque la souris enlevée. L'image de base est toujours celle qui n'a aucun élément de menu sélectionné. Ajoutons donc ce code dans le menu. Prenons qu'un seul lien pour faire l'exemple.

Code:

<area shape="rect" coords="457,0,540,77" href="news.php" onMouseOver="document.getElementById('aab').src ='image_news.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />

Vous n'avez alors qu'à répéter le même processus pour tous les liens réactifs.

Code:

<map name="menu">
<area shape="rect" coords="457,0,540,77" href="news.php" onMouseOver="document.getElementById('aab').src ='image_news.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />
<area shape="rect" coords="541,0,624,77" href="michelle.php" onMouseOver="document.getElementById('aab').src ='image_michelle.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />
<area shape="rect" coords="625,0,709,77" href="gallery.php" onMouseOver="document.getElementById('aab').src ='image_gallery.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />
<area shape="rect" coords="710,0,794,77" href="style.php" onMouseOver="document.getElementById('aab').src ='image_style.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />
<area shape="rect" coords="795,1,878,77" href="web.php" onMouseOver="document.getElementById('aab').src ='image_web.jpg'"
onMouseOut="document.getElementById('aab').src = 'image.jpg'" />
</map>

Et voilà, c'est tout!