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é.

Voici une alternative à la réponse précédente qui ne gérait pas l'ouverture du lien dans un frame. Cette solution fait suite à la question de Kalie du 06/11/2005 sur mon blog

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

 Histoire
 Les Flacons

Ci-dessous le code HTML à insérer

HTML

<IMG  src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif" name=image3><BR>
<IMG src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif" name=image4>&nbsp;
<A style="COLOR: #999; TEXT-DECORATION: none" target="right2"
onmouseover="this.style.color='#936';document.image4.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01lb.gif';document.image3.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01b-lesbelles.gif'"
onmouseout="this.style.color='#999';document.image4.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif';document.image3.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif'" href="http://kalie2602.free.fr/Lesbellesdericci/Lesbelles_histoire.html">
Histoire</A>

Voici une autre alternative, plus propre et demandant moins de code instable lié à l'utilisation des évènement onmouseover, onmouseout et onclick. Cette solution fait suite à la question de Kalie du 06/11/2005 sur mon blog

La méthode à suivre est de créer un style pour les liens dans le CSS du frame gauche avec différente classe pour chaque couleur au passage de la souris. Ainsi, la gestion de l'ouverture du lien en frame droit est plus simple et plus stable qu'avec l'évènement onclick. Enfin, pour les évènement onmouseover et onmouseout, la gestion du changement de style n'est plus à gérer...

Ci-dessous le CSS à intégrer entre les balises <STYLE type=text/css>
et </STYLE> du frame gauche

CSS

a {text-decoration:none;color:#999;}
a:hover.rose      {color:#936;}
a:hover.vert      {color:#6C0;}
a:hover.orange    {color:# FF9A00;}
a:hover.bleu      {color:#3165FF;}
a:hover.bleufonce {color:#000084;}
a:hover.violet    {color:#906;}

Ci-dessous le code HTML à insérer

HTML

<!-- Image du titre "Les belles" -->
<img src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif" name=pic1>

<!-- Lien 1 "Histoire" -->
<img src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif" name=pic2>
<a class="rose" href="URL vers histoire" target="right2"
onMouseOver="document.pic2.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01lb.gif';document.pic1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01b-lesbelles.gif'"
onMouseOut="document.pic2.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif';document.pic1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif'">
Histoire (en rose au passage de la souris)</a>

<!-- Lien 2 "Les flacons" -->
<img src="http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif" name=pic3>
<a class="vert" href="URL vers les flacons" target="right2"
onMouseOver="document.pic3.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01lc.gif';document.pic1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01b-lesbelles.gif'"
onMouseOut="document.pic3.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01la.gif';document.pic1.src='http://kalie2602.free.fr/Lesbellesdericci/Menu/01-lesbelles.gif'">
Les flacons (en vert au passage de la souris)</a>

Il suffit pour chaque lien de faire appel à la bonne classe (rose, vert, orange, bleu, bleufonce ou violet) via l'option class de chaque balise <a> afin de gérer le changement de couleur au passage de la souris et ne pas oublier de préciser le frame de destination target="right2".

Pour les évènement onmouseover et onemousout, on ne gère plus que les 2 changements d'images.

Je considère cette solution plus propre et plus stable que les 2 précédentes.

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