0

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?

User
  • 30,403
  • 22
  • 79
  • 107

2 Answers2

1

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.

Ian Oxley
  • 10,916
  • 6
  • 42
  • 49
  • What is the purpose of the button? Won't just the link alone work here? – User Aug 05 '09 at 12:05
  • Yes, the link by itself should be enough: you would just have to move the width and height from the button's CSS to the #logo's CSS. – Ian Oxley Aug 05 '09 at 12:53
0

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>
ЯegDwight
  • 24,821
  • 10
  • 45
  • 52