Tous les billets sont listés ici et classés par titres et mois dans la boîte Archives.

Il y a peu, j'ai exposé, dans ce billet, comment faire un rollover avec deux images, grâce à un petit code en javascript. Dans la foulée, j'ai créé un générateur de rollovers, le Rollover Maker, qui permet, très simplement, d'obtenir le code à copier-coller.

Aujourd'hui, je me suis toutefois souvenue que GuppY contenait nativement un javascript permettant de créer le rollover optionnel sur les icônes de la barre de menu. J'ai donc pensé qu'il serait judicieux de l'exploiter, d'autant que le code correspondant est d'une simplicité déconcertante. Ainsi, pour obtenir ce rollover :


... j'utilise le mini-code suivant :

<img src="img/ban_carbon.gif" alt="Bannière modèle Carbon" class="imgover" />

Il me suffit :

• d'ajouter la classe class="imgover" au code HTML de l'image de départ
• de verser deux images de mêmes dimensions dans le répertoire img/, la seconde portant le même nom que la première, auquel on adjoint le suffixe _o

... pour que le rollover fonctionne !

Il y a un petit hic : le javascript du rollover de GuppY n'est chargé que si l'option "rollover sur les icônes" est cochée dans l'admin. Donc de deux choses l'une : ou bien cette option est cochée et le rollover fonctionnera partout dans le site ; ou bien il faut modifier le fichier inc/hpage.inc pour que le javascript soit appelé sans condition. Dans ce cas, il suffit de remplacer, vers le début du fichier inc/hpage.inc les lignes suivantes :

if ($­-page[20] != "") {
  echo "<script language="javascript" type="text/javascript" src="".CHEMIN."inc/rollover.js"></script>";
}

par celles-ci :

<script language="javascript" type="text/javascript" src="<? echo CHEMIN; ?>inc/rollover.js"></script>"

Amusez-vous bien !