XHTML/CSS img:hover sans javascript !

Fermé
Utilisateur anonyme - 24 août 2008 à 13:14
RAD ZONE Messages postés 5205 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 19 avril 2020 - 24 août 2008 à 13:58
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

.class img:hover {
 src="urldel'image";
}


J'utilise actuellement le onmouse mais je veux rester en CSS pure !

Merci d'avance,
Respectueusement,
Eiewn

2 réponses

RAD ZONE Messages postés 5205 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 19 avril 2020 1 347
24 août 2008 à 13:58
SALUT

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
6
Utilisateur anonyme
24 août 2008 à 13:24
ça ne marche pas, ces valeurs de proprieté n'existe pas apparemment :(
-1