Astuce Créez des images survolables - Création de Sites

Catégorie : Création de Sites

Nous avons vu dans une astuce précédente comment réaliser des images de menu avec du relief dans Photoshop.


cont_pla.gif	cont_rel.gif

Nous allons aujourd'hui les inclure dans une page qui va en faire apparaître une à la place de l'autre quand on la survole avec la souris (une image dite "survolable").

1. Préchargez les images et la fonction

Vous avez besoin que les images permutent rapidement, pour cela nous allons les précharger et préparer la fonction de permutation.

Dans la section <HEAD>, ouvrez une session JavaScript.
Nous allons créer des variables, qui vont supporter les fichiers images. Ensuite, nous n'aurons plus qu'à appeler la variable dans notre code HTML pour voir l'image s'y mettre.
L'avantage de créer une variable c'est que le navigateur va charger la deuxième image avant d'avoir à l'afficher. Donc, lors de notre effet, il n'y aura aucun temps de chargement !
Nous allons appeler notre variabl cont_xxx pour remplacer l'image Contact, over pour l'image quand la souris est dessus et Out quand la souris n'y est pas...

Cependant, ce code n'est pas suffisant. Il nous faut aussi précharger la fonction !
Nous allons rajouter la fonction swap, à laquelle nous pourrons attribuer des paramètres.

La fonction d'appel sera maintenant swap(x,y), où X sera le numéro de l'image dans la page, et Y le nom du fichier... Nous allons voir cela tout de suite :

2. Créez les liens survolables

Dans votre menu, en lieu et place de la fonction:

<A HREF="/contact/index.html">Contacts<A>

Nous allons déjà insérer l'image de départ:

<A HREF="/contact/index.html"><IMG src="/modules/astuces/images/cont_pla.gif"><A>
Nous allons inclure notre fonction:

<A HREF="/contact/index.html" onMouseOver="swap(0,cont_over)"><IMG src="/modules/astuces/images/cont_pla.gif"><A>

Nous venons d'attribuer le numéro 0 à cet emplacement d'image, et nous avons demandé la permutation quand la souris sera dessus vers la variable cont_over, qui n'est autre que le fichier cont_rel.gif, au vu de notre établissement des variables au 1..
Nous finissons par le OnMouseOut:

<A HREF="/contact/index.html" onMouseOver="swap(0,cont_over) onMouseOut="swap(0,cont_out)"><IMG src="/modules/astuces/images/cont_pla.gif"><A>

C'est toujours le même principe !
Nous obtenons alors notre image survolable:

3. Allez encore plus loin...

Vous pouvez aggrémenter votre menu tout entier d'images "survolables"... en respectant quelques consignes !
- Attribuez des variable logiques à vos images, en effet qqsdfg n'est pas vraiment valable, alors que gallerie_over sera beaucoup plus pratique pour que vous vous y retrouviez...
- Attribuez à chaque image un numéro différent dans la fonction swap, sinon, c'est la première image qui changera, quelque soit l'endroit ou vous passez la souris !

Micro Application