XHTML/CSS img:hover sans javascript ! [Fermé]

Signaler
-
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
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

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 328
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60769 internautes nous ont dit merci ce mois-ci


ça ne marche pas, ces valeurs de proprieté n'existe pas apparemment :(