Как сделать CSS фоновое изображение (спрайт) для кликабельной области? - PullRequest
Новая
       7

Как сделать CSS фоновое изображение (спрайт) для кликабельной области?

0 голосов
/ 05 августа 2009

На примере YouTube.

Их логотип на самом деле происходит из большого основного изображения, содержащего другие графические элементы. Однако можно нажать на логотип, который указывает на корень сайта. Я изучаю их HTML, но все еще не совсем уверен, как они этого достигли.

Может ли кто-нибудь взглянуть на это и, может быть, объяснить это?

Ответы [ 2 ]

1 голос
/ 05 августа 2009

В основном это просто кнопка внутри ссылки с фоновым изображением, но ширина и высота которой ограничены, чтобы отображать только часть фонового изображения / спрайта с логотипом YouTube.

Из их CSS: 

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

Если вы загрузите его в Firebug и измените высоту, вы увидите больше / меньше фонового изображения.

0 голосов
/ 05 августа 2009

Из источника 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>
...