XHTML/CSS img:hover sans javascript !
Utilisateur anonyme
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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
A voir également:
- XHTML/CSS img:hover sans javascript !
- Img burn - Télécharger - Gravure
- Fichier img - Télécharger - Photo & Graphisme
- Img extractor - Télécharger - Animation
- Css exposant ✓ - Forum CSS
- Img href ✓ - Forum HTML
2 réponses
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
RAD
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
