Discussion :

[Antoon]

Bonjour,

J'aimerai mettre une image sur une page web et quand je passe ma souris dessus que cela soit une autre image qui apparaisse.

j'ai trouvé des tutos sur le net mais cela ne fonctionne pas.

Quelqu'un pourrait me montrer comment faire svp ?

@+ @ntoon

[Damouille]

C'est un grand classique. le solution la plus simple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="image"></div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.image {
height: 10px; /* La hauteur exacte de l'image */
width: 10px; /* La largeur exacte de l'image */
background: url(monimage.png) no-repeat;
}
 
.image:hover {
background-image: url(monimage2.png);
}

Le problème de cette technique est que l'image va se charger au moment du survol. Résultat, une lenteur de l'affichage lorsque le site n'est pas en cache.

Personnellement, je préfère n'utiliser qu'une seule image et jouer avec les background position.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.image {
height: 10px; /* La hauteur exacte de l'image */
width: 10px; /* La largeur exacte de l'image */
background: url(monimage.png) no-repeat;
}
 
.image:hover {
background-position: right;
}

[kohsaka]

en css cela n'est possible que sur certaines balises, par exemple la balise <a>

je ne pense pas que la balise <img> en face partie (ou du moins pas sur tous les navigateurs).

le mieux pour toi est que tu passes par du javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="source.jpg" width="100px" height="100px" onmouseover="this.src='source2.jpg'" />

tu peux le compléter avec un onmouseout


edit: damouille ta solution ne fonctionne pas sur ie6 et surement <

[Damouille]

en css cela n'est possible que sur certaines balises, par exemple la balise <a>

Cela marche sur tous les éléments. Il n'y a que IE6 avec qui cela ne marche pas, mais c'est juste que ce navigateur ne respecte pas les normes w3c.

Pour faire plaisir à IE6, il vaut mieux en effet utiliser une balise <a> en diplay: block;

La technique en js de kohsaka marche bien. C'est juste que, si c'est possible à faire en css, il vaut mieux utiliser le css plutot que le javascript.

[kohsaka]

je suis d'accord avec toi et je le déplore, malheureusement trop de personnes utilise encore ie6.

si on utilise la balise <a>, il faut préciser un lien pour que ça fonctionne, ce qui est gênant je trouve, mais après c'est un choix à faire.

[Damouille]

je suis d'accord avec toi et je le déplore, malheureusement trop de personnes utilise encore ie6.

si on utilise la balise <a>, il faut préciser un lien pour que ça fonctionne, ce qui est gênant je trouve, mais après c'est un choix à faire.

Pour désactiver le lien on peut utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="return false">...</a>

Pour éviter la petite main au survol on peut utilisier

a {
cursor:default;
}

Mais, du coup, on utilise quand meme du javascript

[kohsaka]

bon je pense qu'on a répondu a la question de Antoon

-> résolu ^^