Complément sur le Roll-over – Double effet

La technique du roll-over permet également d'obtenir d'autres effets.
Jusqu'à présent, nous avons vu comment faire pour que, lorsque la souris survole une image, cette image semble modifiée.
Mais rien n'empêche de modifier une image autre que celle qui est survolée...

Dans l'exemple ci-dessous, Vladimir, un riche senior de Montsimpa, s'approche de son télescope. Puisqu'il fait jour, ce ne sont certainement pas les étoiles qu'il s'apprête à admirer... A votre avis, comment sa voisine Brenda va-t-elle réagir ?

 

Roll-over - double effet - Vladimir  
  Roll-over - double effet - Brenda

Si tout se passe comme prévu, lorsque la souris survole l'image de Vladimir, les deux images sont modifiées.

Pour effectuer un roll-over "double effet" selon cette technique, il faut :

  1. comme précédemment, avoir testé et compris les précédents exemples de roll-over
  2. préparer les différentes images qu'on veut utiliser :
    * j'appellerai "1re image" celle qui montre Vladimir, il y a en fait deux images, l'image "de base", celle qui s'affiche si aucune action n'est effectuée avec la souris, et l'image "de remplacement", qui s'affiche lorsque la souris passe "sur" l'image de Vladimir.
    * j'appellerai "2e image" celle qui montre Brenda, il y a là aussi une image "de base" et deux images "de remplacement"
  3. recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.

<!-- on place les deux images dans un tableau --!>
<table>
  <tr>
    <td>
<!-- la premiere image en haut a gauche --!>
    <A
   onmouseover="document.img01.src='(indiquez ici l'image de remplacement de la 1re image)';document.img02.src='(indiquez ici l'image de remplacement A de la 2e image)'"
   onmouseout="document.img01.src='(indiquez ici l'image de base de la 1re image)';document.img02.src='(indiquez ici l'image de base de la 2e image)'"
   href="(indiquez ici le lien vers la page à atteindre)" target="_self">
   <img alt="Roll-over - exemple 7 - image 1" title="Roll-over - exemple 7 - image 1"
      src="(répétez ici l'image de base de la 1re image)"
      height="300" width="400" id="img01" name="img01" border="0" />
</A>
    </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
<!-- la deuxieme image en bas a droite --!>
    <td>
      <A
      onmouseover="document.img02.src='(indiquez ici l'image de remplacement B de la 2e image)'"       onmouseout="document.img02.src='(indiquez ici l'image de base de la 2e image)'"
      href="(indiquez ici un lien vers la page à atteindre)" target="_self">
       <img title="Roll-over - exemple 7 - image 2" height="300" alt="Roll-over - exemple 7 - image 2"
        src="(répétez ici l'image de base de la 2e image)" width="400" border="0" id="img02" name="img02" />
    </td>
  </tr>
</table>

 

Cliquer ici pour lire les commentaires détaillés sur ce code


Masquer les commentaires détaillés

Voici les commentaires concernant ce code :
  1. les deux images sont repérées par leurs identifiants, nommés ici "img01" et "img02"

  2. Dans l'exemple ci-dessus, les deux images ont été placées dans un tableau. D'autres présentations sont possibles, à condition naturellement que les deux images soient suffisamment proches dans la page pour pouvoir être vues simultanément par l'internaute.

  3. la nouveauté par rapport à ce que nous avons déjà vu : dans l'attribut "onmouseover" rattaché à l'image de Vladimir, on code cette fois-ci deux instructions : une 1re instruction pour modifier la 1re image (Vladimir), et une 2e instruction pour modifier la 2e image (Brenda)
    Attention à la syntaxe ! il y a comme d'habitude des guillemets simples et des guillemets doubles, ainsi qu'un point virgule pour séparer les deux instructions.

  4. l'attribut "onmouseout" contient également deux instructions, pour rétablir d'une part l'image "de base" de Vladimir, d'autre part, l'image "de base" de Brenda, quand la souris quitte l'image de Vladimir.

  5. ici, pour le fun, j'ai également mis un roll-over sur l'image de Brenda : il y a donc 3 images différentes pour Brenda :
    * l'image "de base", qui est affichée par défaut, sans aucun roll-over
    * l'image de remplacement A, affichée lorsque la souris survole l'image de Vladimir
    * et l'image de remplacement B, affichée lorsque la souris survole l'image de Brenda
    Mais on pourrait se contenter de l'image de remplacement A.
Masquer les commentaires détaillés

 

Cette technique trouvera très vite ses limites si on veut l'employer dans des exemples similaires à celui ci-dessus.
En effet, pour manipuler des images animées, d'autres techniques seront plus adaptées, par exemple : animation Flash, diaporama ou mini-vidéo.

Mais voici un exemple d'utilisation assez intéressant, adapté à la présentation d'une série de recolorations :

carrelage monumental

      Passer la souris sur les vignettes pour modifier le sol de la cuisine de Flora

vignette01 vignette02 vignette03 vignette04 vignette05

Lorsque la souris survole une des 5 petites images, la grande image est modifiée selon le même principe de roll-over : l'instruction onmouseover est utilisée, mais c'est la grande image, désignée dans le code par son identifiant, et non la petite image survolée, qui est modifiée.

Pour effectuer un roll-over "double effet" selon cette technique, il faut :

  1. comme précédemment, avoir testé et compris les premiers exemples de roll-over ci-dessus
  2. préparer les grandes images montrant les recolorations, ainsi qu'une vignette (petite image) pour chacune des grandes images
  3. recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.

<!-- on place les images dans un tableau de 3 lignes par 5 colonnes (autant de colonnes que de vignettes) --!>
<table width="620" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
<!-- sur la 1re ligne, on place une seule cellule, pour contenir la grande image --!>
<!-- l'attribut colspan=5 indique qu'on fusionne les 5 cellules de la ligne en une seule --!>
    <td colspan="5" align="center">
      <img src="(indiquer ici l'adresse de la grande image par défaut)" alt="texte alternatif" title="info-bulle" width="600" height="450" id="img600" name="img600" />
    </td>
  </tr>
  <tr>
<!-- sur la 2e ligne, on place une seule cellule, pour contenir le texte explicatif --!>
    <td colspan="5" align="left">
Ce texte explique au visiteur de la page l'action qu'il doit effectuer pour pouvoir visualiser l'effet voulu, par exemple : <br />Passer la souris sur les vignettes pour modifier le sol de la cuisine de Flora<br /><br />
    </td>
  </tr>
<!-- sur la 3e ligne, on place 5 cellules, une pour chacune des 5 vignettes --!>
  <tr>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 1)" alt="1re vignette" name="vignette01" id="vignette01"        onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 1)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 2)" alt="2e vignette" name="vignette02" id="vignette02"        onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 2)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 3)" alt="3e vignette" name="vignette03" id="vignette03"        onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 3)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 4)" alt="4e vignette" name="vignette04" id="vignette04"        onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 4)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 5)" alt="5e vignette" name="vignette05" id="vignette05"        onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 5)'" />
    </td>
  </tr>
</table>

 

Cliquer ici pour lire les commentaires détaillés sur ce code


Masquer les commentaires détaillés

Quelques commentaires sur ce code :
  1. dans les attributs onmouseover attachés à chaque vignette, on modifie toujours un seul identifiant, img600, c'est-à-dire celui de la grande image.

  2. les dimensions indiqués (height et width) correspondent à une grande image de 600px sur 450 px : à adapter s'il y a lieu.

  3. contrairement à ce qui était fait dans les exemples précédents, on n'a pas utilisé de lien (balise <a>), l'attribut onmouseover est directement inclus dans la balise <img> : ça marche aussi

  4. on n'a pas indiqué d'attribut onmouseout : lorsque la souris quitte la vignette, la grande image conserve la dernière image affichée

  5. en théorie, il n'est pas indispensable de donner un identifiant à chaque vignette... Mais c'est une bonne habitude à prendre !

  6.  je recommande de modifier légèrement l'aspect de la vignette lorsque la souris la survole. Plusieurs techniques sont possibles, dont un roll-over simple, ou une classe spécifique dans le CSS (feuille de styles), mais cela, c'est une autre histoire !

  7. Au lieu de 5 petites images (vignettes), on aurait pu également placer de simples liens 'texte' : l'idée de base étant identique : lorsque la souris survole un lien, on modifie la grande image en la désignant par son identifiant.
Masquer les commentaires détaillés

Enfin, je ne le répéterai jamais assez, plus il y a d'images à gérer, plus il faut être vigilant sur leur poids. Ceci afin de ne pas plomber la durée de chargement de la page, et de préserver une bonne fluidité des effets au survol de la souris. Ici, chacune des 5 grandes images pèse entre 50 et 60 Ko, et chaque vignette pèse environ 2 Ko, soit un total de l'ordre de 300 Ko : c'est raisonnable.

Et voilà, à vous maintenant !

* * * * * *


Retour à la page principale :

Roll-over et mapping

* * * * * * *