Partage

Changer la photo sur un lien HTML/CSS

15 mai 2018 à 13:50:07

Bonjour,

je suis en train de réaliser un site internet pour mon projet et je chercher à changer la photo lorsque l'on passe par dessus avec la souris, en regardant les tutos je suis arriver jusqu'à la:

<div >
<a href="index.php?action=logout" id="sign_out"></a>
</div>

et pour le css:

#sign_out {
width: 32px;
height:32px;
display:block;
background: url("/public/img/sign_out.png");
}
#sign_out:hover {
width: 32px;
height: 32px;
display: block;
background: url("/public/img/sign_out_2.png");

Mais ceci à fait disparaître mon liens et rien n'apparaît; es-ce que quelqu'un aurait une solution???

Merci

15 mai 2018 à 18:02:27

Bonjour SébastienRipolles,

Ton code est bon, je l'ai testé. Ton pb vient soit de  :

  • /public/img/sign_out_2.png n'existe pas
  • /public/img/sign_out_2.png est longue à charger

Ta méthode n'est pas bonne tu va avoir le même Pb que lilsource  :

https://openclassrooms.com/forum/sujet/boutons-hover-qui-sautent-au-passage-de-la-souris

Je te ferais donc la meme remarque :

1) voir si ton bouton ne peut pas être fait en full Css

2) voir si ton effet hover, n'est pas faisable en css

3) mettre des sprites, c'est à dire avoir une seule image des tes états de boutons et décaler le background suivant tes états

Découvrez les Css avec la zonecss.fr
22 mai 2018 à 11:35:11

Merci de ta réponse, au final j'ai utiliséJavaScript pour régler le problème avec 'onmouseover'

Changer la photo sur un lien HTML/CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown