Les Allergies
Alimentaires
Posez votre question Signaler

XHTML/CSS img:hover sans javascript !

Eiewn 176Messages postés 11 août 2008Date d'inscription - Dernière réponse le 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
Lire la suite 

XHTML/CSS img:hover sans javascript »

2 réponses
Réponse
+6
moins plus
RAD ZONE 4790Messages postés 20 janvier 2007Date d'inscription 23 mai 2012Dernière intervention 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

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
-1
moins plus
Eiewn 176Messages postés 11 août 2008Date d'inscription 24 août 2008 à 13:24
ça ne marche pas, ces valeurs de proprieté n'existe pas apparemment :(

 Ajouter un commentaire - Site web
Ajouter un commentaire
Posez votre question
Ce document intitulé « XHTML/CSS img:hover sans javascript ! » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?