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 ?
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 :
<!-- 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
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 :
Passer la souris sur les vignettes pour modifier le sol de la cuisine de Flora |
||||
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 :
<!-- 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
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
* * * * * * *