Pour ceux qui savent, quand on passe le curseur de la souris sur l'image des Pink Floyd ou sur mon tétoucom (en haut à gauche), l'image change instantanément... Pour ceux qui ne savaient pas, faites donc l'essai !! ;))
On m'avait demandé la procédure voici déjà pas mal de temps... la voici donc !!
Petite précision, il faut que la mise en page soit éditable ! Donc, en clair, ça fonctionne pour tous ceux qui peuvent éditer leur skin personnelle, mais ça ne fonctionnera pas pour ceux qui utilisent encore les skins publiques (elles ne sont pas éditables).
Cet effet de roll-over se fait grâce à un petit javascript, que je vous mets ci-dessous, à placer entre les balises <head> et </head> de votre skin (juste après la balise <head>, ça ira parfaitement) :
<SCRIPT LANGUAGE="JavaScript">
/*
on precharge l'image de substitution
*/
i1 = new Image;
i1.src =http://gamin.joueb.com/images/Sylvain2_vignette.jpg;
i2 = new Image;
i2.src =http://gamin.joueb.com/images/Pink_Floyd2.jpg;
</SCRIPT>
Important : il faut impérativement que les deux images (celle d'origine et celle de substitution) aient les mêmes dimensions, sinon ça ne "collera" pas...
Ensuite, il faut aller à l'endroit de la skin où se trouve la commande d'affichage de l'image ou de la photo, et modifier comme suit :
La commande d'origine :
Tetoucom
<a href="http://joueb.com/users/gamin.shtml">
<img src=http://joueb.com/users/gamin_75x90.gif width=75 height=90 alt="Gamin">
</a>
Image Pink Floyd
<td width=262 valign=center>
<img src=http://gamin.joueb.com/images/Visages.gif ALT="Pink Floyd" width=262 height=152>
</td>
La commande modifiée :
Tetoucom
<a href="http://joueb.com/users/gamin.shtml">
<img src=http://joueb.com/users/gamin_75x90.gif width=75 height=90 name="nomimage1" alt="Gamin" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://joueb.com/users/gamin_75x90.gif'">
</a>
Image Pink Floyd
<td width=262 valign=center>
<img name="nomimage2" src=http://gamin.joueb.com/images/Visages.gif ALT="Pink Floyd" width=262 height=152 onMouseOver="nomimage2.src=i2.src" onMouseOut="nomimage2.src='http://gamin.joueb.com/images/Visages.gif'">
</td>
Explication en clair :
Je reprends le script :
<SCRIPT LANGUAGE="JavaScript">
/*
on precharge l'image de substitution
*/
i1 = new Image;
i1.src =http://gamin.joueb.com/images/Sylvain2_vignette.jpg;
i2 = new Image;
i2.src =http://gamin.joueb.com/images/Pink_Floyd2.jpg;
</SCRIPT>
L'image de substitution (ma mini-photo) que j'ai mise pour le tétoucom prend l'appellation i1, et on précise que c'est une nouvelle image (i1 = new Image;), dont l'adresse est :
i1.src =http://gamin.joueb.com/images/Sylvain2_vignette.jpg;
Jusque là, rien de bien dur... Allons à la commande modifiée :
<a href="http://joueb.com/users/gamin.shtml">
<img src=http://joueb.com/users/gamin_75x90.gif width=75 height=90 name="nomimage1" alt="Gamin" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://joueb.com/users/gamin_75x90.gif'">
</a>
L'adresse de l'image actuelle est indiquée (img src=http://joueb.com/users/gamin_75x90.gif) mais on lui donne tout de même le nom de nomimage1 (name="nomimage1") pour les besoins de l'application (et aussi pour la différencier des autres photos ou images s'il y en a)...
La commande onMouseOver="nomimage1.src=i1.src" signifie que si le curseur se trouve sur l'image, on charge l'image de substitution (i1.src) dont l'adresse a été indiquée dans le script.
La commande onMouseOut="nomimage1.src='http://joueb.com/users/gamin_75x90.gif'" veut dire que tant que la souris se trouve hors du champ de l'image, on affiche l'image d'origine (dont on donne l'adresse).
Ca peut paraître compliqué, mais en fait, c'est relativement simple...
A noter : le script se place TOUJOURS dans la skin, juste après la balise <head>... Par contre, l'affichage de l'image (ou de la photo) peut parfaitement se situer dans un bloc configurable (c'était dans la skin chez moi...)
Si vous avez pas tout compris, dites-le moi, mais j'ai essayé d'être le plus clair possible...
Bonnes modifications !! :))
Mots-clés : Technique, Informatique
