Changer bouton lorsque souris passe dessus
Résolu
mat08
Messages postés
322
Date d'inscription
Statut
Membre
Dernière intervention
-
stres -
stres -
Bonjour, je débute en CSS et je voudrais savoir comment faire un hover sur un bouton image mais je n'y arrive pas.
Déjà je ne suis pas sûr de la construction de mes boutons :
<SPAN style="position: absolute; top: 26.2%; left: 14.05%">
<a href="MON_LIEN"><img src="accueil.PNG"></a>
</SPAN>
Comme vous avez pu le voir c'est une image-lien.
Maintenant je voudrais dans le CSS remplacer cette image par une autre lorsque je passe la souris dessus. Mais bon... Je n'y arrive pas... Pourriez-vous m'aider ?
Déjà je ne suis pas sûr de la construction de mes boutons :
<SPAN style="position: absolute; top: 26.2%; left: 14.05%">
<a href="MON_LIEN"><img src="accueil.PNG"></a>
</SPAN>
Comme vous avez pu le voir c'est une image-lien.
Maintenant je voudrais dans le CSS remplacer cette image par une autre lorsque je passe la souris dessus. Mais bon... Je n'y arrive pas... Pourriez-vous m'aider ?
A voir également:
- Changer bouton lorsque souris passe dessus
- Changer dns - Guide
- Trousseau mot de passe iphone - Guide
- Comment activer le pavé tactile sans souris - Guide
- Mot de passe - Guide
- Changer mot de passe administrateur windows 10 - Guide
2 réponses
Salut, effectivement ton code n'est pas super propre voir même...
Je te propose de tester une autre méthode:
Le html:
Et le css:
Je te propose de tester une autre méthode:
Le html:
<div id="mon_bouton">
<a href="ton_lien" title="Ton titre"></a>
</div>
Et le css:
#mon_bouton a
{
width: ??px; /*La largeur de l'image*/
height: ??px; /*La hauteur de l'image*/
display: block;
background-image: url("images/premiere-image.jpg"); /*On affiche la première image*/
}
#mon_bouton a:hover
{
width: ??px; /*La largeur de l'image*/
height: ??px; /*La hauteur de l'image*/
background-image: url("images/fond-actif.jpg"); /*On affiche la deuxième image au passage de la souris*/
}
Hello,
Voici un exemple:
++
Voici un exemple:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
#bouton{
background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0;
height:83px;
width:152px;
}
a:hover #bouton{
background-position: 0 -83px;
}
</style>
</head>
<body>
<a href="#">
<div id="bouton">
</div>
</a>
</body>
</html>
++
Sinon il n'y aura que le texte du bouton qui sera cliquable, ce qui n'est pas le but.
Pourriez-vous me faire un modèle svp ?