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/jp...
http://www.journal-la-mee.fr/IMG/jp...
– 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-m...
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
(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é
Fil RSS 
