Roll over et image coulissante

bonjour
je souhaite réaliser un lien avec un fond qui s'adaptera à la longueur du texte utilisé pour le lien. Pour faire plus joli, je tente de réaliser un roll over lors du survol de la souris.

Pour cela j'utilise 2 images.
partie gauche qui s'adapte au texte :


Tout se passe bien pour la partie gauche, mais lors du survol, la partie droite de l'image (en jaune) reste collée à gauche, elle apparaît légèrement derrière l'image de gauche.

Cela en raison du positionnement :

a.telecharger:hover
{
/* Sliding right image */
background: transparent url(icones/pdf_04.png) no-repeat scroll [b]0px[/b] -84px; 
display: block;
float: left;

On voit bien que le positionnement est à 0px en horizontal.
Le problème est que si je le positionne à 100px par exemple, l'image n'évoluera pas avec le texte servant de lien. L'idéal serait un float-right mais l'image est déjà en float-left.

Du coup je ne sais pas comment faire.
Voici le code complet :

a.telecharger
{
/* Sliding right image */
background: transparent url(icones/pdf_04.png) no-repeat scroll top right;
text-decoration:underline;
display: block;
float: left;
height: 67px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 52px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
color: red;
font-family: Verdana, sans-serif;
font-size:13px;
font-weight:bold;
}
a.telecharger span
{
/* Background left image */
background: transparent url(icones/pdf_03.png) no-repeat; 
display: block;
line-height: 67px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 0 0 5px 8px;
}
a.telecharger:hover
{
/* Sliding right image */
background: transparent url(icones/pdf_04.png) no-repeat scroll 0px -84px; 
display: block;
float: left;
height: 67px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 52px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
text-decoration: none;
color: red;
font-family: Verdana, sans-serif;
font-size:13px;
font-weight:bold;
}
a.telecharger:hover span
{
/* Background left image */
background: transparent url(icones/pdf_03.png) no-repeat 0px -84px;
display: block;
line-height: 67px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 0 0 5px 8px;
}


a.telecharger:hover span
{
color:#FD5656;
text-decoration:none;
}

<a class="telecharger" title="Télécharger gratuitement" href="documents/fichier.pdf""><span>logiciel gratuit</span></a>

Modifié par Sam Soul (09 Mar 2012 - 19:56)

Bonjour,


Bon déjà ta solution "adaptable" est un peu bancale car elle a une limite de taille.. il faudrait faire 3 blocs (le début largeur fixe, le milieu répétable à l'infini, la fin largeur fixe). Mais la question de ton post n'est pas la.

Dans le css :

a.telecharger:hover span

pourquoi tu n'utilises pas simplement :

background-image : url("icones/pdf_04.png") no-repeat scroll [b]right bottom[/b];

vu que tu avais mis "right top" dans le précédent....
Modifié par _laurent (09 Mar 2012 - 18:01)

le bottom ne peut pas marcher car il faut au contraire que l'image remonte, j'ai déjà essayé un top right mais ça ne marche pas, l'image disparait et celle de gauche se décale.
J'ai essayé aussi un

 top -84px;

mais j'ai le même résultat.
Modifié par Sam Soul (09 Mar 2012 - 18:06)

EDIT
essaie rigth bottom.
Modifié par _laurent (09 Mar 2012 - 18:13)

Sam Soul a écrit :
le bottom ne peut pas marcher car il faut au contraire que l'image remonte

la paramètre "top" veux dire que ton image sera aligné au haut de la balise, donc la première image visible.
Le paramètre "bottom" veux dire que ton image sera aligné au bas de la balise, donc la seconde image visible.

C'est bon ça marche, je ne comprends pas pourquoi je n'y ai pas pensé c'était pourtant intuitif.
Je te remercie en tout cas

Par contre, j'ai mis ce code dans a.telecharger:hover et pas dans a.telecharger:hover span.

Sur a.telecharger:hover span. ça ne marche pas.
Mais peu importe mon problème est résolu, je te remercie !
Modifié par Sam Soul (09 Mar 2012 - 18:19)