Réaliser un rollover graduel sur un menu (html)

Voici un tutoriel sur comment réaliser un rollover graduel sur un menu.

Tout d'abord, il vous faut découper votre menu de façon à faire votre rollover. C'est-à-dire, obtenir le nombre d'images requises pour votre menu. Dans le menu d'exemple, nous avons trois éléments de menu.


Ensuite, nous devons reprendre les mêmes images, mais avec une modification particulière: les images doivent être plus claires. Le but du tutoriel est d'obtenir un menu que lorsque nous passons la souris sur un élément de menu, l'image semble s'illuminer de façon graduelle et non pas de façon directe comme dans les rollover que nous sommes habitués de voir. Alors voici les trois autres images que nous devons avoir:


Une fois que nous avons toutes les images, nous devons placer le menu. Ici, nous placerons les images cote à cote, donc nous aurons recours à une table. Une simple table à trois cellules. Nous ferons aussi un lien sur chaque image. Note: Il est important d'insérer dans les cellules les images les plus claires, bref celle que nous verrons une fois la souris passée sur les images. J'expliquerai plus tard pourquoi.

Code:

<table cellpadding="0" cellspacing="0" border="0" width="222">
<tr>
<td valign="top"><a href="apropos.html"><img src="aproposCLAIRE.jpg" border="0"></a></td>
<td valign="top"><a href="commandes.html"><img src="commandesCLAIRE.jpg" border="0"></a></td>
<td valign="top"><a href="extras.html"><img src="extrasCLAIRE.jpg" border="0"></a></td>
</tr>
</table>

Suite à ce code, nous avons donc un menu fonctionnel, mais sans effet de rollover graduel. Ce que nous allons maintenant faire est ceci: pour chaque cellule contenant une image (donc trois), nous allons placer l'image la plus foncée correspondante en tant que background de la cellule. Pour le moment, il est certain que nous ne verrons pas ces images en background puisque les images insérées dans les cellules vont les cacher. Nous obtiendrons donc ce code:

Code:

<table cellpadding="0" cellspacing="0" border="0" width="222">
<tr>
<td valign="top" background="aproposFONCEE.jpg"><a href="apropos.html"><img src="aproposCLAIRE.jpg" border="0"></a></td>
<td valign="top" background="commandesFONCEE.jpg"><a href="commandes.html"><img src="commandesCLAIRE.jpg" border="0"></a></td>
<td valign="top" background="extrasFONCEE.jpg"><a href="extras.html"><img src="extrasCLAIRE.jpg" border="0"></a></td>
</tr>
</table>

Maintenant, appliquons l'effet rollover graduel. Mettez ce code entre les balises head de votre page.

Code:

<script type="text/javascript" src="gradualfader.js">

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library ([Vous devez être inscrit et connecté pour voir ce lien]
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

Ensuite, téléchargez le fichier suivant sur votre PC. Faites un clic-droit sur le fichier et choisir "Enregistrer la cible sous...".

[Vous devez être inscrit et connecté pour voir ce lien]

Ensuite, ouvrez ce fichier à l'aide du Bloc-Note:

[Vous devez être inscrit et connecté pour voir cette image]

Voyez les deux lignes que j'ai surlignées. Inscrivez les mêmes valeurs (0.0 et 0.2) que ci-dessus si ce ne sont pas les bonnes. Placez ensuite ce fichier à la racine de votre site.

Complètement dans le bas de votre page, juste au-dessus de la balise de fermeture </body>, copiez ce code:

Code:

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

Pour terminer, nous allons nous allons modifier notre menu. Comme je le disais plus haut, nous avons mis les images foncées en background et les images claires en tant qu'images dans les cellules. Donc en ce moment, ce que nous voyons, ce sont les images claires. Ce que nous voulons, c'est l'inverse. Quand nous passons la souris sur les images, l'image foncée est remplacée par l'image claire. Ce que nous devons faire, c'est mettre l'opacité de l'image claire à 0 (pour qu'on voit l'image foncée en background au départ) et que cette opacité soit tranquillement menée à 100% lorsque nous passons la souris. Nous avons déjà mis l'opacité initiale à 0 en modifiant le fichier .js plus haut. Maintenant pour que cette opacité s'applique, il faut ajouter le code class="gradualfader" dans les balises d'images, comme suit:

Code:

<table cellpadding="0" cellspacing="0" border="0" width="222">
<tr>
<td valign="top" background="aproposFONCEE.jpg"><a href="apropos.html"><img src="aproposCLAIRE.jpg" border="0" class="gradualfader"></a></td>
<td valign="top" background="commandesFONCEE.jpg"><a href="commandes.html"><img src="commandesCLAIRE.jpg" border="0" class="gradualfader"></a></td>
<td valign="top" background="extrasFONCEE.jpg"><a href="extras.html"><img src="extrasCLAIRE.jpg" border="0" class="gradualfader"></a></td>
</tr>
</table>

Un peu long, mais fonctionnel! :)