ROLLOVER SIMPLE

 

Un rollover est un effet créé sur un objet au passage de la souris.

Il fait appel à 2 instructions: onmouseover et onmouseout.
Le navigateur détecte le passage du curseur sur un objet.

Exemple:
On veut donner l'impression que le bouton s'éclaire au passage de la souris. Il faut donc deux images qui se substitueront au passage du curseur.

Code correspondant:

<a href="ma_page.html"
onmouseover="image1.src='../gif/bouton_on.gif'"
onmouseout="image1.src='../gif/bouton_off.gif'">
<img src="bouton_off.gif" width="32" height="32" border="0" name="image1">
</a>

Commentaires:

- La première ligne pointe vers le fichier à ouvrir lors du clic de souris.

- La seconde ligne"appelle" une image lors du passage de la souris (onmouseover)

- La troisième ligne"rappelle"l'image d'origine lorsque le curseur quitte l'objet (onmouseout)

- La quatrième ligne indique les paramètres de l'image d'origine en lui affectant un nom: name="image1"
C'est ce nom qui doit être inscrit dans les lignes d'appel onmouseover et onmouseout.
S'il y a plusieurs rollovers sur la même page, chacun d'eux doit avoir un paramètre différent pour l'instruction name="x"

 

ROLLOVER DISTANT

 

Dans ce cas, ce n'est pas l'objet survolé par le curseur qui change, mais un objet distant.

Pour réaliser cet effet, on utilise un script. Ces "micro-programmes" sont souvents libres d'utilisation à condition d'en avertir l'auteur.(loi de la propriété intellectuelle)
Ce script doit être placé dans la section <head> </head> de la page.

Exemple:
Lors du passage du curseur sur le bouton, on veut que la lampe jaune s'allume


Code correspondant:

<head>

<script language="JavaScript">
// nom est le nom de l'image, nom = cadre ,src = adresse du fichier d'image
// copyright http://www.toutjavascript.com
function rollover_tjs(nom,src) {document.images[nom].src=src;}
</script>

 </head>

<body>

<img id="cadre1" src="lamp_jaune_off.gif">

<a href="ma_page.html"
onmouseover="rollover_tjs('cadre1','lamp_jaune_on.gif')"
onmouseout="rollover_tjs('cadre1','lamp_jaune_off.gif')">
<img src="bouton_off.jpg" width="60" height="31" border="0" >
</a>

</body>

Commentaires:

- Le script placé dans la section <head> </head> définit les paramètre de la fonction utilisée.

- Les instructions onmouseover et onmouseout n'appellent plus une image mais une fonction avec ses paramètres.

- La section <img src= ....> appelle l'objet à partir duquel sera déclanchée l'action.

- La section <img id="cadre1" src="lamp_jaune_off.gif"> se situe à l'endroit du rollover.
id="cadre1" est l'image qui sera envoyée par les instructions onmouseover et onmouseout
src=" ..." est l'image d'origine lorsque le rollover n'est pas actif.
Les paramètres de cadre doivent être différents s'il existe plusieurs rollovers distants.

Remarque:

On peut combiner plusieurs actions pour les évènements de souris.
Ces actions doivent être séparées par un " ; "

Exemple:
Lors du passage du curseur sur le bouton, on veut que la lampe et le bouton s'allument

Code correspondant:

<a href="ma_page.html"
onmouseover="image3.src='bouton_on.jpg'; rollover_tjs('cadre1','lamp_jaune_on.gif')"
onmouseout="image3.src='bouton_off.jpg'; rollover_tjs('cadre1','lamp_jaune_off.gif')">
<img src="escap60.jpg" width="60" height="31" border="0" name="image3">
</a>