Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Roll-over avec ou sans javascript

Roll-over avec ou sans javascript

FTP : installation et usage

  Rollover en javascript

On peut faire aussi un rollover grâce au générateur trouvé sur le site http://www.net-pratique.fr/outils/generoll.html

Il faut pour cela :
– 1) envoyer les deux dessins sur le site distant et noter leur adresse. Pour moi, ici, c’est :
http://www.journal-la-mee.fr/IMG/jpg/dessin-3.jpg
http://www.journal-la-mee.fr/IMG/jpg/dessin-4.jpg

– 2) entrer ces deux adresses dans le générateur de code
– 3) déterminer si on veut une bordure ou non, et déterminer sa couleur

– 4) recopier le code qui est donné, mais seulement à partir de <img name="RollImage"...

Par exemple :

<img name="RollImage" style="border : 1px solid #ff6600" src="http://www.journal-la-mee.fr/IMG/jpg/dessin-3.jpg" onMouseOver="document.RollImage.src='http://www.journal-la-mee.fr/IMG/jpg/dessin-4.jpg'" onMouseOut="document.RollImage.src='http://www.journal-la-mee.fr/IMG/jpg/dessin-3.jpg'">

Cela donne ceci :

Remarquer qu’on trouve dans l’ordre :
adresse1
adresse2
adresse1

Cela fonctionne mais l’inconvénient c’est que onMouseOver n’est pas reconnu par le validateur W3c

 RollOver en html/css

Une méthode très simple ici :
http://blog.adhess.net/2010/03/la-maniere-propre-de-faire-des-roll.html

Concrètement, j’ai fabriqué une image de 115 px sur 261 px. Voir ci-contre

Cette image je l’ai appelée : essai.jpg . Elle est ici : http://www.journal-la-mee.fr/IMG/jpg/essai.jpg

Il faut alors écrire la ligne suivante, dans un article, là où on veut mettre le rollover

Carte du Territoire

(noter que la photo s'appelle essai.jpg et qu'on écrit ici : essai.html)

et il faut placer le code css, soit dans « spip_style.css » soit dans l’article lui-même.

a.rolloverLink {
   text-indent:-10000px;
   display:block;
   width:115px;
   height:261px;
   background-image:url("http://www.journal-la-mee.fr/IMG/jpg/essai.jpg");
   background-position:top;}

a.rolloverLink:hover {
   background-position: bottom;}

 Roll-over avec e-anim

J’ai fait un roll-over avec e-anim : www.phildes.com. C’est un peu compliqué.

Il faut disposer au départ du logiciel e-anim
et de deux dessins (dessin-1 et dessin-2)

J’ai abandonné