Le survol d'image

Le survol "classique".

-

Pour commencer nous allons simplement faire afficher une image sans gérer

le survol. Cela se fait comme ci dessous.

-

<IMG src="http://.../Image1.jpg">

Où http://.../Image1.jpg est l'URL de votre image. Cela donne ce résultat :

-

-

-

Maintenant, faisons en sorte que lors du survol de l'image, elle change. On utilise pour cela la commande ONMOUSEOVER combinée avec le paramètre SRC.

-

<IMG onmouseover="this.src='http://.../image2.jpg'" src="http://.../image1.jpg">

-

On indique ici que lorsqu'on survole l'image ONMOUSEOVER, on change le

 paramètre SRC qui est le chemin URL de l'image à afficher. On passe de

 IMAGE1 à IMAGE2.

-

 

-

-Vous remarquerez que lorsqu'on ne survole plus l'image c'est toujours IMAGE2 qui est affichée. Maintenant nous allons faire en sorte que ce soit IMAGE1 qui s'affiche quand on ne survole pas l'image.

-

Cela ce fait à l'aide de la commande ONMOUSEOUT.

-

<IMG onmouseover="this.src='http://.../image2.jpg'" src=http://.../image1.jpg 

onmouseout="this.src='http://.../image1.jpg'">

-

On indique donc que lorsqu'on ne survole plus l'image ONMOUSEOUT, on change le paramètre SRC qui est le chemin URL de l'image à afficher.

 -

-

-

Dans le cas ci-dessus, les images ayant la même taille, le changement d'image se passe bien. Mais voyons ce qu"il se passe lorsque les images n'ont pas la même taille.

-

 On remarque un certain décalage pas très agréable.

-

--

-

-

--

-

-

-

-

-

Pour palier ce problème, je vous conseille de mettre vos images dans un tableau dont les dimensions sont plus grandes que celles des images. Ici, l'image1 fait L1=227 par H1=283 et l'image3 fait L3=283 par H3=227. Donc mon tableau fera au minimum L3=283 par H1=283. Cependant, ce ne sera pas vraiment bon puisque ici je ne compte pas les bordures du tableau etc... Personnellement je ne me prend pas la tête avec des calculs, je préfère prévoir large, mon tableau fera 295x295 .

-

-

 

Ainsi le problème de décalage est résolu.

-

-

-

-

-

-

-

-

-

Pour info voici ci-dessous le source pour mettre l'image dans un tableau, mais je vous conseille plutôt de passer par l'interface de l'éditeur pour créer un tableau et y mettre l'image de base. Ensuite passez en mode Source pour rajouter les commandes de survol.

-

<TABLE class=" FCK__ShowTableBorders" height=295 cellSpacing=1 cellPadding=0 width=295 align=left border=0>
    <TBODY>
        <TR>
            <TD><IMG onmouseover="this.src='http://.../image3.jpg'" onmouseout="this.src='http://.../image1.jpg'" src="http://.../image1.jpg">

           </TD>
        </TR>
    </TBODY>
</TABLE>

 -

Un autre problème peut survenir avec le survol d'image, c'est le temps de chargement. En effet, lorsque la souris survole l'image1 on affiche l'image2 qui n'est pas encore en mémoire, il faut donc la charger. Selon la taille de l'image cela peut prendre un certain temps. La solution la plus efficace est bien entendu d'avoir des images les plus "légères" possible (c'est à dire que la taille du fichier en octets est la plus petite possible). Autrement, une autre solution est d'obliger Windows à charger l'image en mémoire au chargement de la page. Pour cela, l'astuce est de mettre l'image sur la page mais de ne pas l'afficher.

C'est à dire d'utiliser la commande IMG et d'utiliser le paramètre DISPLAY comme ci-dessous :

-

<IMG style="DISPLAY: none"src="http://.../image2.jpg">

-

Ainsi, l'image est chargée en mémoire, mais pas affichée à l'écran. En finalité, le code ressemble à cela :

-

<IMG style="DISPLAY: none"src="http://.../image3.jpg">

<TABLE class=" FCK__ShowTableBorders" height=295 cellSpacing=1 cellPadding=0 width=295 align=left border=0>
    <TBODY>
        <TR>
            <TD><IMG onmouseover="this.src='http://.../image3.jpg'" onmouseout="this.src='http://.../image1.jpg'" src="http://.../image1.jpg">

            </TD>
        </TR>
    </TBODY>
</TABLE>

-

Pour info c'est cette méthode que j'ai utlisé pour faire les boutons de ma bannière.

____________________

 Lire la suite.

Retour au sommaire.

--

Pour accéder aux rubriques de nos articles, cliquez ici, pour le livre d'or c'est là.