Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

XHTML/CSS img:hover sans javascript !

Dernière réponse le 24 aoû 2008 à 13:58:06 Eiewn, le 24 aoû 2008 à 13:14:03

Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 3.0.1

Meilleures réponses pour « XHTML/CSS img:hover sans javascript ! » dans :

Toutes les balises XHTML et CSS (Résolu) Voir

XHTML CSS et a:hover + img (Résolu) Voir

Popup en CSS, sans Javascript Voir Voici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...

Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...

Différence entre display:none et visibility:hidden VoirLes deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....

XHTML/CSS/PHP/MYQSL/C/C++/JAVASCRIPT (Résolu) Voir

Liste à puces css Voir

Changer propriété body css img souris Voir

Télécharger Apprendre XHTML & CSS Voir

Télécharger Firstpage VoirFirst Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de prévisualiser le site. 1st Page 2006 supporte les standards HTML, XHTML, PHP, ASP, Cold Fusion, Javascript, CSS, SSI et Perl.

CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...

SALUT voila un petit exemple de rollover image par la methode du Lire la suite

Posez votre question Répondre

Eiewn, le 24 aoû 2008 à 13:24:12

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

Répondre à Eiewn

RAD ZONE, le 24 aoû 2008 à 13:58:06

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
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Posez votre question Répondre