XHTML/CSS img:hover sans javascript !
Bonjour,
Je souhaiterais donné un effet à une image en utilisant juste du CSS !
Supposons IMG1, au passage de la souris se remplace par IMG2, et revient ensuite IMG1 quand la souris part. Mais je ne veux pas de javascript car le CSS est plus rapide, et mêeme, je ne veux utiliser que xhtml et css ^^
Je voudrais par ailleurs savoir si une telle proprieté existe
J'utilise actuellement le onmouse mais je veux rester en CSS pure !
Merci d'avance,
Respectueusement,
Eiewn
Je souhaiterais donné un effet à une image en utilisant juste du CSS !
Supposons IMG1, au passage de la souris se remplace par IMG2, et revient ensuite IMG1 quand la souris part. Mais je ne veux pas de javascript car le CSS est plus rapide, et mêeme, je ne veux utiliser que xhtml et css ^^
Je voudrais par ailleurs savoir si une telle proprieté existe
.class img:hover {
src="urldel'image";
}
J'utilise actuellement le onmouse mais je veux rester en CSS pure !
Merci d'avance,
Respectueusement,
Eiewn
Configuration: Windows XP Firefox 3.0.1
2 réponses
-
ContributeurSALUT
voila un petit exemple de rollover image par la methode du bloc qui evite le prechargement de la 2 image , puisque elle ce charge a l ouverture mais en hiden<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head> <style type="text/css"> /*<![CDATA[*/ a.images { display: block; width: 100px; height: 30px; background-image: url('2.gif') } a.images:hover { visibility: visible } a.images:hover img { visibility: hidden } /*]]>*/ </style> <title>images:hover CSS </title> </head> <body> <center> <a class="images" href="#"> <img border="0" src="1.gif" /></a> </center> </body> </html>
RAD -
ça ne marche pas, ces valeurs de proprieté n'existe pas apparemment :(
