Image qui change au passage de la souris(rollover)
Résolu/Fermé
geoffray62
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
-
14 juin 2014 à 12:26
geoffray62 Messages postés 15 Date d'inscription samedi 14 juin 2014 Statut Membre Dernière intervention 16 juin 2014 - 14 juin 2014 à 19:44
geoffray62 Messages postés 15 Date d'inscription samedi 14 juin 2014 Statut Membre Dernière intervention 16 juin 2014 - 14 juin 2014 à 19:44
A voir également:
- Image qui change au passage de la souris(rollover)
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Quelle touche pour débloquer la souris ? - Guide
- Changer de dns - Guide
- Image iso - Guide
- Comment changer le passage de la souris entre deux ecrans ✓ - Forum Windows
7 réponses
canarder
Messages postés
1714
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
354
Modifié par canarder le 14/06/2014 à 12:37
Modifié par canarder le 14/06/2014 à 12:37
Bonjour,
Pour faire ça il y a deux méthodes, une avec du CSS et une avec du Javascript (pas de PHP pour le rendu !) :
* La première en CSS, c'est de mettre un div de la taille de l'image, avec comme background la première image, et sur :hover en background la deuxième image.
J'ai pas testé les deux codes, mais normalement ça devrait marcher, sauf pour le deuxième où je suis pas sûr du this.src='value', sinon c'est this.setAttribute('src','value').
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
Pour faire ça il y a deux méthodes, une avec du CSS et une avec du Javascript (pas de PHP pour le rendu !) :
* La première en CSS, c'est de mettre un div de la taille de l'image, avec comme background la première image, et sur :hover en background la deuxième image.
<div class="image_1">&nb sp; <!-- enlever l'espace entre nb et sp ! --></div>* La deuxième en Javascript, c'est d'utiliser onmouseover et onmouseout.
<style type="text/css">
<!--
.image_1 {
width: 100px;
height: 80px;
background: url(img/image_1_out.png);
}
.image_1:hover {
background: url(img/image_1_on.png);
}
//-->
</style>
<img src="img/image_1_out.png" onmouseover="this.src='img/image_1_on.png'" onmouseout="this.src='img/image_1_out.png'" />
J'ai pas testé les deux codes, mais normalement ça devrait marcher, sauf pour le deuxième où je suis pas sûr du this.src='value', sinon c'est this.setAttribute('src','value').
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
