08) Le RollOver
Le RollOver ou encore appelé image retournée est un ensemble constitué de deux images strictement identiques. Le fait de passer avec le curseur de la souris au-dessus de la zone délimitée par le RollOver fera apparaître la deuxième image.
Chaque cercle est en fait composé de deux images. La deuxième ne sera visible que lorsque l'on déplace le curseur dessus. Il faut bien évidemment avoir effectué les diverses retouches de ces images avec un logiciel de traitement d'images tel que Photoshop ou Paint Shop Pro.
Passons aux choses sérieuses. Ouvrez Dreamweaver (version 2, 3 ou 4).
Placez tout d'abord un calque sur votre page avec l'icône  . Vous le positionnerez précisément plus tard.
Cliquez ensuite sur l'icône Image Retournée  pour insérer vos images.
Dans le premier champ entrez le nom de l'image au repos.
Dans le deuxième champ entrez le nom de l'image quand le curseur est dessus (au travail).
Dans le champ lien donnez la page que l'on doit ouvrir lorsque l'on cliquera dessus et laissez la case Précharger les images cochée.
Effectuez les mêmes opérations avec toutes vos images retournées. Et une fois quelles sont toutes placées approximativement sur la page, vous pouvez les placer précisément.
Si vous devez effectuer une interface dont certaines images retournées se placent sur d'autres (comme celle qui sert d'exemple), vous pouvez donner un ordre de placement verticale grâce au Z-index.
Plus ce chiffre (celui dans la fenêtre du Z-index) sera grand plus près de vous sera l'image.
Dans l'exemple choisi cela donne ceci après placement des images au pixels près grâce aux flèches de direction du clavier:
Effectuez un F12 pour visionner votre interface et admirez le résultat. | 
