Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

CSS Sprite

HTML

<h1>CSS Sprite</h1>

<div id="nw">

<img src="nw.gif" width="290" height="200" alt="Northwest USA" />

<a id="olympia" class="bang-bg" href="olympia.html" title="Olympia">

<span class="screenreader-only">Olympia</span></a>

<a id="salem" class="flag-bg" href="salem.html" title="Salem">

<span class="screenreader-only">Salem</span></a>

<a id="boise" class="star-bg" href="boise.html" title="Boise">

<span class="screenreader-only">Boise</span></a>

</div>

CSS

.bang-bg { background:url("bt.gif") -48px -16px; width:16px; height:16px; }

.flag-bg { background:url("bt.gif") -64px -16px; width:16px; height:16px; }

.star-bg { background:url("bt.gif") -64px -32px; width:16px; height:16px; }

.star-bg:hover { background-image:url("wt.gif"); background-color:black; }

.flag-bg:hover { background-image:url("wt.gif"); background-color:black; }

.bang-bg:hover { background-image:url("wt.gif"); background-color:black; }

.screenreader-only { position:absolute; left:-9999px; top:-9999px;

width:1px; height:1px; overflow:hidden; }

/* Nonessential rules are not shown. */