Discussion :

[goldor]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Erwan31]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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}

[goldor]

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"

[goldor]

Merci Erwan31, ça fonctionne à merveille

[Erwan31]

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)

[goldor]

merci du conseil

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