Aujourd’hui, le but va être d’apprendre (ou de revoir pour certains) comment faire un rollover.
Niveau du tutoriel : facile
Logiciels utilisés : photoshop ou illustrator, puis dreamweaver CS3
Temps : une dizaine de minutes
I Un peu de théorie !
Avant de commencer, nous allons rapidement définir ce qu’est un rollover.
Le rollover est un événement déclenché par le survol de la souris, ce qui explique que l’on appelle aussi cette technique : l’image survolée.
Le rollover est composé en 2 parties : le roll-over (lorsque la souris est au dessus de l’élément) et le roll-out (lorsqu’elle sort de l’élément). De manière plus simple, le rollover correspond en une succession de 2 images, permettant ainsi de donner un effet de dynamisme et rendre le site plus attrayant. La première image est donc visible en permanence sur le site alors que l’a seconde n’apparaît que lorsque l’internaute passe ou clique dessus.
II Passons maintenant à la pratique !
Pour commencer, nous allons faire un rollover basique : une barre de menu qui change d’aspect lors du survolage de la souris.
- Ouvrez photoshop (ou illustrator)
- Créer votre l’architecture de votre page web (un petit rappel : 1024 / 768 en RVB) puis enregistrez-la.
Voici par exemple la page que je viens de créer :
- N’oubliez pas de créez vos tranches pour que l’on passe ensuite sur du web.
- Je souhaiterais que lorsque la souris passe sur un mot de ma barre de menu, celui-ci s’éclaircisse.
- Pour cela, je vais enregistrer mon document sous un autre titre : par exemple “siterollover”.
- A partir de là, on peut faire les modifications que l’on souhaite afin de rentre le résultats final. Je souhaite rester assez discrète dans mon effet. Pour cela, je vais lui faire un léger effet de lumière externe. Ce qui donne ceci :
mon onglet avant :
mon onglet après :
- Oui, je sais, c’est très discret, mais je vous rappelle que c’est ce qui est souvent le plus simple qui marche le mieux.
- Une fois que tous vos onglets ont pris la forme que vous souhaitiez (celle qu’ils auront lorsque le curseur sera dessus), enregistrez (refaites vos tranches si elles n’y sont plus) puis passez sur Dreamweaver.
- Ouvrez Dreamweaver
- Faites les méthodes habituelles pour créer votre site (”site” > “nouveau site” > “fichier” > “nouveau”…)
- enregistrer le premier gabarit que vous avez fait au départ (sans les effets de rollover) comme page de modèle
- Une fois cela fait, cliquez sur votre premier onglet. Un contour noir se créé. Il correspond à la tranche que vous aviez faite auparavant sur Photoshop ou Illustrator.
- Une fois votre onglet sélectionné, il est important de regarder la fenêtre en bas de votre écran pour avoir certaines informations concernant votre image telle que la source ou encore le lien.
- Par exemple, mon fichier s’appelle “site-web_03.gif” Le numéro 3 correspond au numéro de ma tranche. C’est la 3eme que j’ai faite. L’image est actuellement en roll-out. C’est l’image permanente.
- Il faut maintenant la remplacer par l’image roll-over, c’est à dire celle qui s’affichera quand la souris passera dessus.
- Pour cela, copier double cliquez dans l’onglet source pour tout sélectionner puis faite copier.
- Supprimez l’image. Il ne reste plus que la couleur de votre fond.
- Dirigez-vous dans votre menu du haut, cliquez sur “insertion” > “objet image” > “image survollée”.
- La fenêtre intitulée “Insérer une image survolée” s’ouvre.
- Cliquez sur “Parcourir” pour trouver votre image originale. Cela consiste à sélectionner dans vos dossiers votre l’image de base (la roll-out)
- Faites la même chose pour votre image survolée (la rool-over)
- Vous pouvez rentrer un texte secondaire si vous le souhaitez. Par exemple, le titre de votre onglet.
- Une fois tout cela fait, cliquez sur OK
- Puis enregistrer de nouveau votre modèle.
- Vous venez de faire votre premier roll-over. Vous pouvez faire la même chose avec tous vos autre onglets.
- L’image survolée est maintenant insérée dans votre page. Cependant, vous ne pourrez la voir que vous lancerez le navigateur et réactualiserez votre page.
III Et le code dans tout ça !
Pour ceux qui n’aime pas faire la création graphique et préfère le code, il existe plusieurs solutions.
La plus simple, utiliser un générateur de roll-over sur Internet qui ressemble à ceci : 
Mais attention, ces générateurs se sont pas toujours bons et mettent beaucoup plus de code qu’ils n’en devraient, ce qui peut être source de problèmes!
Le plus simple revient dont à utiliser le code ci-dessous, en remplaçant les éléments en gras tels que “monrollover”, “image-substitution”, “votre lien”…
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”Javascript”>
<!–
monrollover= new Image( );
monrollover.src=”image-substitution.gif“;
//–>
</SCRIPT>
</HEAD>
<BODY>
<A HREF=”votre-lien.html” onmouseover=”monrollover.src=’image-subsitution.gif‘;” onmouseout=”monrollover.src=’image-defaut.gif‘;”>
<IMG SRC=”image-defaut.gif” name=”monrollover” border=0>
</A>
</BODY>
</HTML>
Pour ceux qui souhaiteraient plus d’informations concernant cette partie, je vous conseille d’aller sur ce site, qui est très intéressant et explique de manière simple.
Voilà, vous savez maintenant faire des rollovers ! Comme vous avez pu le voir, c’est très simple et rapide! Alors n’hésitez plus a en avoir recours !
