Accueil
Ergonomie Graphisme Technologie
Technologie
 
 Comment faire ?
 
   

Cet exemple est basé sur le logiciel Dreamweaver (Macromedia) mais il est facilement transposable sur d'autres logiciels comme Go live (Adobe).

1 Créer les images.

La première étape nécessite de créer les images qui vont Ítre utiliser dans le rollover. La seule contrainte est de bien les dimensionner afin qu'elles s'intervertissent sans problème. De plus il faut prévoir une image transparente pour l'état initiale. Donc pour l'exemple il a fallu créer 11 images. 5 images pour chacune des dates, 5 images pour représenter le A correspondant à ces 5 dates et une image vide pour l'état initiale.

2 Créer un tableau.

Maintenant il faut ouvrir la page où le rollover va être placé et créer un tableau. Le tableau permet de placer les images les une par rapport aux autres sans problèmes, mais il n'est pas indispensable (en théorie). Dans l'exemple le tableau fait deux colonnes, la première colonne comprend 5 lignes (une par date) et la deuxième colonne une seule ligne. Il reste juste à insérer les images images initiales à leurs places. De plus il faut donner un nom au image.

3 Créer le rollover.

Pour cela, il faut sélectionner l'image du "menu" ( colonne de gauche dans l'exemple), ouvrir la fenêtre de comportement (dans "Fenêtre/Comportement").

Cliquer sur le +, choisir "intervertir image". La fenêtre suivante apparaît.
 

Exemple de rollover.
Comment faire?
 

Dans "images", on sélectionne l'image à remplacer et on indique l'image de remplacement. Dans l'exemple l'image sur laquelle le comportement est placé, est différent de l'image remplacée.

Il ne reste plus qu'a faire la même chose avec les autres images pour obtenir un superbe rollover.