Changer bouton lorsque souris passe dessus

Résolu/Fermé

mat08 Messages postés 322 Date d'inscription mercredi 11 août 2010 Statut Membre Dernière intervention 31 mai 2014 - 23 déc. 2011 à 12:39
stres - 30 janv. 2015 à 14:17

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 ?

A voir également:

Changer bouton lorsque souris passe dessus
Changer dns - Guide
Comment activer le pavé tactile sans souris - Guide
Changer clavier qwerty en azerty - Guide
Voir mot de passe wifi android - Guide
Mot de passe administrateur - Guide

2 réponses

Réponse 1 / 2

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
23 déc. 2011 à 12:59

Salut, effectivement ton code n'est pas super propre voir même...
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*/
}

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
23 déc. 2011 à 13:04

On met le div dans le a, et non pas l'inverse.
Sinon il n'y aura que le texte du bouton qui sera cliquable, ce qui n'est pas le but.

mat08 Messages postés 322 Date d'inscription mercredi 11 août 2010 Statut Membre Dernière intervention 31 mai 2014 9
23 déc. 2011 à 13:18

Cool merci ! Il n'y a qu'une seule chose que je n'arrive pas à faire c'est positionner le bouton, je voudrais le mettre plus à droite et un petit peu plus haut.

Pourriez-vous me faire un modèle svp ?

mat08 Messages postés 322 Date d'inscription mercredi 11 août 2010 Statut Membre Dernière intervention 31 mai 2014 9
23 déc. 2011 à 13:29

Non c'est bon j'ai trouvé ;)

stres
30 janv. 2015 à 14:17

Ta fait Comment O-O

Réponse 2 / 2

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 23/12/2011 à 13:02

Hello,

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">
      &nbsp;
    </div>
  </a>
</body>
</html>

Discussions similaires

Mot de passe administrateur Freebox : où le trouver ?

Modifier code parental family link