How to make a CSS background image (sprite) to clickable area?

Question

At the example of YouTube.

Their logo comes in fact from a big master image containing other graphical elements. However one can click on the logo which point to the root of the site. I'm researching their HTML but still not quite sure how they achieved that.

Could anyone please look at it and maybe explain it?

Answer 1

From their HTML source:

<a href="/" onmousedown="urchinTracker('/Events/Header_3/YouTubeLogo');" id="logo"><button onclick="window.top.location.href='/'; return false;" class="master-sprite" title=""></button></a>

Answer 2

It's basically just a button inside link with a background image, but with it's width and height constrained to only show the portion of the background image / sprite with the YouTube logo.

From their CSS:

#masthead #logo button {
    background-position:0 0;
    height:33px;
    width:84px;
}

If you load it up in Firebug and change the height you will see more / less of the background image appear.

Answer 3

thank you for point!