CSS et images
Fermé
Bonjour,
je créé un site internet. Dans celui-ci, se trouve un menu avec plusieurs bouton. J'ai créer des bouton au format PNG. Je voudrais que lorsque l'utilisateur passe sa souris sur le bouton (donc sur l'image), celle-ci change. J'ai donc créé deux type un "libre" et l'autre "enclenché".
Comment coder mon CSS (si c'est possible) pour que lorsque la souris passe sur l'image, celle-ci change...
merci d'avance
je créé un site internet. Dans celui-ci, se trouve un menu avec plusieurs bouton. J'ai créer des bouton au format PNG. Je voudrais que lorsque l'utilisateur passe sa souris sur le bouton (donc sur l'image), celle-ci change. J'ai donc créé deux type un "libre" et l'autre "enclenché".
Comment coder mon CSS (si c'est possible) pour que lorsque la souris passe sur l'image, celle-ci change...
merci d'avance
A voir également:
- CSS et images
- Des images - Guide
- Extraire images pdf - Guide
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop
- 4 images 1 mot niveau 10 chaperon rouge ✓ - Forum Jeux vidéo
- La vidéo à télécharger a été accélérée. elle va 4 fois plus vite que la vidéo d'origine. restaurez la vidéo d'origine. combien de papillons figurent à 3 secondes et 6 images dans la vidéo d'origine ? ✓ - Forum Montage et acquisition vidéo
8 réponses
ACervoise
Messages postés
216
Date d'inscription
mercredi 3 juin 2009
Statut
Membre
Dernière intervention
21 juin 2010
85
15 juil. 2009 à 16:06
15 juil. 2009 à 16:06
Euh, tu devrais plutot utiliser de javascript pour cela.
Si les boutons dont tu parles sont des liens et que l'image est en background, tu peux utiliser la propriété css "a:hover" pour changer le background de ton lien au moment du survol.
Sinon, comme l'a dit ACervoise tu peux utiliser le js.
Sinon, comme l'a dit ACervoise tu peux utiliser le js.
Tu dois utiliser la pseudo class hover
exemple :
Attention IE 6 ne comprends pas la pseudo class hover
Solution inclure un fichier .htc (cf google: htc+hover+ie)
Sinon javascript, c'est peut être plus simple si tu veux que ça passe sous ie 6
exemple :
div {
background: url(imgoff.png)
}
div:hover {
background: url(imgon.png)
}
Attention IE 6 ne comprends pas la pseudo class hover
Solution inclure un fichier .htc (cf google: htc+hover+ie)
Sinon javascript, c'est peut être plus simple si tu veux que ça passe sous ie 6
resalut
Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
55
15 juil. 2009 à 16:15
15 juil. 2009 à 16:15
en javascript
<a href="" onmouseover="lehover.src='tonimage2.png'" onmouseout="lehover.src='tonimagedebase.png'"><img src="tonimagedebase.png" border="0" alt="image" name="lehover" /></a>
<a href="" onmouseover="lehover.src='tonimage2.png'" onmouseout="lehover.src='tonimagedebase.png'"><img src="tonimagedebase.png" border="0" alt="image" name="lehover" /></a>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour, je viens à l'instant de trouver comment le faire sans javascript...
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
merci
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
merci
mais c'est du javascript ça? je croyais qu'il fallait le céclarer avec <script></script> ou quelque chose qomme ça...
resalut
Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
55
15 juil. 2009 à 16:23
15 juil. 2009 à 16:23
les attribut on (onmouseover,onmouseout ... ) sont javascript :)
