Comment s'appelle ce rollover en CSS ?

[Membre supprimé 2]

bonjour,

Sur ce site, vous pouvez voir 3 portraits, avec fonction rollover au survol de la souris.

Je connais la technique classique du rollover mais apparement, ils utilisent CSS pour permettre d'afficher la moitié d'une image.

Savez vous comment cela s'appelle et éventuellement ou je peux trouver un tutoriel ?

merci

 

[lhooq]

<STYLE TYPE="text/css"><!--
#lien1 {
position:absolute;
left: 0px;
top: 50px;
width: 311px;
height: 192px;
background: url(i/bte1on.gif) top left no-repeat;
}

#lien1 a {
display: block;
left: 0px;
top: 50px;
width: 311px;
height: 192px;
background: url(i/bte1off.gif) top left no-repeat;
}

#lien1 a:hover {
background: transparent none;
}

#lien1 a:focus {
background: transparent none;
}
// -->
</STYLE>

 

[Membre supprimé 2]

Merci de m'avoir appris la technique CSS pour rollover

Cependant tu utilises 2 images différentes:

background: url(i/bte1on.gif) top left no-repeat;
background: url(i/bte1off.gif) top left no-repeat;

le site dont je parlais utilise une seule image et la technique permet comme je l'ai dit d'afficher une moitié de l'image et une autre moitié au survol de la souris...

 

[Nephou]

petit indice : faire une recherche sur alistapart avec "sprite" comme mot-clef

 

[belluard]

La réponse est là

 

[Niconemo]

Pour ceux qui passeraient par là et qui se demanderaient à quoi ça sert : ça permet de charger très facilement et naturellement l'image du rollover en même temps que l'image de base puisque c'est la même en fait. Du coup pas de délai dès le 1er rollover.

 

[Membre supprimé 2]

Merci à tous :zen: