28172 sujets

CSS et mise en forme, CSS3

Ajouter une image sur un lien

Bonjour
Je souhaiterais afficher une image lorsque l'on met son curseur sur un lien url.Pour cela,je me me suis créé une petite régle css avec un a et hover 

 <style type="text/css">

.memo {
width: 79px;
height: 40px;
background-repeat: no-repeat;
background-color: transparent;

}

.memo a {
display: block;
height:300px;
width:220px;
}

.memo a:hover { /* masquage de l'image1 au survol */
background-image: url(image.jpg);
height:300px;
width:220px;
background-position: bottom;
text-align:center;

}


</style> 


<p class="memo"><a href="#" class="memo">Memo</a></p>


Le problème c'est que je n'arrive pas à positionner l'image du a:hover sous le lien url!Même se malgré avoir mis un background-position: bottom;

Une idée?
Modifié par stephane72 (14 Jan 2012 - 13:30)
Pas sur que le background-position: bottom; soit compris. Il faudrait probablement utiliser background-position: left bottom; ou background-position: center bottom;.

Pas sûr que ça soit l'explication du problème... mais comme on n'a pas accès à la page (ou à une page de démo qui montrer le problème), et en particulier comme on n'a pas accès à l'image, pas grand chose d'autre à en dire.
Bonjour,

L'exemple marche parfaitement, l'image est bien placée sous le lien et le background-position:center bottom; est correctement pris en compte. Tu obtiens donc exactement ce que tu demandes. Smiley smile

Quel est le résultat visuel souhaité? Si l'image doit s'afficher plus bas que le texte du lien et ne pas s'afficher derrière ce texte, mieux vaut procéder ainsi:
- Tu crées une image de dimensions connues, mettons de 200px de haut.
- Tu t'arranges pour que ton lien ait une hauteur correspondant à 200px plus la hauteur nécessaire pour afficher le texte. Pour info, utiliser height n'est pas la meilleure solution ici.
- Tu continues à utiliser background-position:center bottom;.

Ça peut donner quelque chose comme ça:
.memo a {
  display: block;
  width: 220px;
  padding-bottom: 200px;
  text-align: center;
}
.memo a:hover,
.memo a:focus {
  background: url(image.jpg) center bottom;
}
Chez moi je n'est pas sa,lorsque l'on met le curseur sur le lien,se dernier se trouve dans l'image et non au dessus !
Modifié par stephane72 (15 Jan 2012 - 11:36)
Salut,
Moi je ferais comme ça :
Dans le HTML :
Dans tu liens tu ajoutes l'image : 
<a href="http://jddemo.byethost9.com/demo/index.html#" class="memo">Memo<img src="image.jpg"></a>


Dans le CSS :
Tu cache l'image du lien par défaut. (tu peux également la positionner à volonté)
Tu la fait apparaître lorsque il y a un "hover" sur le lien.
je crois que çe que j'ai dis correspond bien. Esaie avec le HTML que j'ai donné precedement et avec ce CSS : 


.memo {
    height: 40px;
    width: 79px;
}
.memo a img {
    display: none;
}
.memo a:hover img {
    display: block;
    position: relative;
    left: 100px;
}
stephane72 a écrit :
Chez moi je n'est pas sa,lorsque l'on met le curseur sur le lien,se dernier se trouve dans l'image et non au dessus !

Oui c'est ce que j'obtiens également, et comme je l'écrivais c'est ce que tu demandes au navigateur donc ton code marche... c'est juste qu'il ne fait pas ce que tu souhaites. Smiley smile

La solution que j'ai proposée est une piste. Julien a donné une autre piste utilisable. Enfin, si tu veux le même comportement que le script que tu indiques comme référence, avec une position de l'image qui suit le curseur, il faudra nécessairement passer par JavaScript (dans ce cas, autant utiliser le script en question).
Sujet clos
Aller à