Réponse à Kalie - changement de texte et d'image au passage de la souris

Voici une solution suite à la question de Kalie du 04/11/2005 sur mon blog

Ci-dessous, l'exemple avec les 2 images donnés par Kalie (en haut à gauche du texte: "Les Belles" et le signe devant, en gris). Au passage de la souris sur le mot "histoire", celui-ci doit passer de gris à rose et les images doivent changer (les même images mais en rose). De plus le mot "Histoire" doit être cliquable et renvoyer sur une autre page.

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus Histoire  et ultrices posuere cubilia Curae; Morbi non orci. Cras tellus augue, nonummy vitae, laoreet sed, vestibulum ut, magna. Fusce porta turpis sit amet libero. Etiam id diam. Integer sed urna dignissim turpis egestas blandit. Curabitur sollicitudin urna sit amet risus. Nunc eu metus non elit laoreet tincidunt. Aliquam vel nunc. Ut mollis magna sit amet nibh.

Ci-dessous le code HTML à insérer

HTML

<IMG src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif" name=image1>
<IMG src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif" name=image2>
<SPAN
style="COLOR: #999;CURSOR:hand"
onmouseover="this.style.color='#936';document.image1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01lb.gif';document.image2.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01b-lesbelles.gif'"
onmouseout="this.style.color='#999';document.image1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif';document.image2.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif'"
onclick="top.location.href='http://kalie2602.free.fr/Lesbellesdericci/Lesbelles_histoire.html'">
Histoire
</SPAN>

• Les 2 images peuvent être placées n'importe où, l'essentiel étant que chacune aient un nom distinct l'une de l'autre par la propriété name (dans l'exemple: image1 et image2)
• Style dans la balise SPAN applique le style de base au mot "histoire", dans l'exemple, couleur grise de la police et le curseur de la souris est forcé pour se transformer en pointeur de lien (compatible Internet explorer uniquement)
• Pour l'évènement onmouseover on demande 3 actions séparées par un point virgule: 1) chagement de la couleur de la police (rose), 2) changement de l'image1 et 3) changement de l'image2
• Pour l'évènement onmouseout on demande 3 actions séparées par un point virgule: 1) chagement de la couleur de la police (retour au gris), 2) changement de l'image1 (retour à celle d'origine) et 3) changement de l'image2 (retour à celle d'origine)
• l'évènement onclick permet d'effectuer une action en cliquant sur le mot "histoire", dans l'exemple, on simule un lien, en ouvrant l'URL indiqué.

Pour toute question complémentaire, laisser un commentaire ;-)