comment mettre un rollover compatible W3C

commment mettre un rollover valide W3C?

Je veux que mon site sois valide W3C et pour cela il faut que je change ma méthode pour mes images survolées

j'en ai vu une qui semblait intéressante. Elle s'écrit comme suit ->

Code:

---

1 2 3 4

<map name="mappy"> <area shape="rect" href="mapage.html" coords="334,264,680,472" /> </map>

---

mais une question se pose comment je met mon image survolée dedans cette région?? Plus précisément comment faire un rollover en html et/ou css et non en javascript.

P.S: la balise area n'est pas nécessaire. Je pense que c'est la méthode à utiliser

Bonsoir,
tout d'abord il faudrait que tu précises de quel type d'image il s'agit (décorative, informative...).
Il existe une technique CSS qui permet de faire l'économie du preload
et du rollover JS consistant en une simple translation de background CSS.

Exemple

Code:

---

1 2 3 4 5 6 7

#menus a { display:block; width: 50px; height: 50px; background: url (...) no-repeat; } #menus a:focus, #menus a:hover {background-position: 0 -50px}

---

mon image est un logo et lorsqu'il est over c'est le même logo avec une lueur externe!! mais je vais essayer avec ton code pis une div id="menu"

Merci Erwan31, ça fonctionne à merveille :king:

Ok j'avais oublié de préciser que l'état hover doit se trouver sur la même image
mais attention si c'est un logo (censé donc transmettre une information),
il faudra ajouter une image transparente de 1px X 1px et dimensionnée en HTML avec une
alternative textuelle du nom du logo, pour ne pas perdre l'information en cas
d'image non chargée (pour une raison ou une autre) ;)
Cette méthode ne saura pas totalement accessible (si CSS désactivée et image chargées)

merci du conseil

voici le résultat si ça t'intéresse-> http://www.dreamtickinteractive.com

Citation:

---

Envoyé par goldor

merci du conseil
voici le résultat si ça t'intéresse-> http://www.dreamtickinteractive.com

---

Ok mais tu n'as pas suivi mes conseils ;)
D'une part l'état hover de l'image doit se trouver sur la même image que l'état
normal (en dessous dans l'exemple que je donne) car ici l'image à l'état hover
ne se charge qu'un fois le curseur sur l'image, ce qui prend un certain temps.
D'autre part tu n'as pas mis d'image transparente avec le alt DreamTick Interactive. (ni d'ailleurs dans le title de la page)

Pour info, le positionnement absolue génère une boîte de block, tu n'as donc pas besoin du display:block sur le lien.