À l'exemple de YouTube. Leur logo provient en fait d'une grande image maître contenant d'autres éléments graphiques. Cependant, on peut cliquer sur le logo qui pointe vers la racine du site. Je recherche leur code HTML, mais je ne sais toujours pas comment ils ont réussi.Comment faire une image d'arrière-plan CSS (sprite) à la zone cliquable?
Quelqu'un pourrait-il regarder s'il vous plaît et peut-être l'expliquer?
De source HTML:
<a href="/" onmousedown="urchinTracker('/Events/Header_3/YouTubeLogo');" id="logo"><button onclick="window.top.location.href='/'; return false;" class="master-sprite" title=""></button></a>
Nasty utilisation de 'button.onclick' :( – chelmertz
Il est fondamentalement juste un bouton à l'intérieur lien avec une image de fond, mais avec sa largeur et la hauteur contrainte à afficher uniquement la partie de l'image d'arrière-plan/sprite avec le logo YouTube .
De leur CSS:
#masthead #logo button {
background-position:0 0;
height:33px;
width:84px;
}
Si vous chargez dans Firebug et de changer la hauteur, vous verrez plus/moins de l'image d'arrière-plan apparaissent.
Quel est le but du bouton? Le lien ne fonctionnera-t-il pas seul ici? – User
Oui, le lien en soi devrait être suffisant: il vous suffit de déplacer la largeur et hauteur du CSS du bouton au CSS du logo. –
merci pour le point! –