Menük készítésekor előfordul, hogy különböző képeket rendelünk a hiperhivatkozás (link) href, hover és (igényesebb esetben) active, valamint visited pszeudo-osztályaihoz. Kisebb adatátviteli sebesség esetén időre van szükség az egyes képek lecseréléséhez. Hogy lecsökkentsük a működési időt, az oldal letöltésével egyidejűleg a háttérben – többnyire JavaScript segítségével – letöltetjük a menüképeket is.

Van ennél egy egyszerűbb, jóval gyorsabb megoldás és JavaScriptre sincs szükség. Ha a képeket egy közös képállományba helyezzük, egyből letöltődik valamennyi kép, és adott esemény bekövetkeztekor csak a kép pozícióját kell módosítani CSS-ben. Például, ha a gomb 30 pixel magas és a képállományban az ábrák réstelenül egymás alatt helyezkednek el:

#menu a {
	display: block;
	background: url("képállomány") no-repeat
}
#menu a:hover {
	background-position: 0 -30px
}
#menu a:active {
	background-position: 0 -60px
}

Adódik egy további lehetőség: a menüelem nevét – nem a kép részeként – szövegesen is megadhatjuk. Ebben az esetben a biankó gomb feliratozásának jellemzőit szintén a stíluslapon írhatjuk elő:

#menu a {
	display: block;
	background: url("képállomány") no-repeat;
	font: betűtípus;
	color: szín;
	text-align: center;
	line-height: 30px
}
#menu a:hover {
	background-position: 0 -30px;
	color: hover-szín
}
#menu a:active {
	background-position: 0 -60px;
	color: active-szín
}

Megadhatjuk a gomb szélességét (amely akár kisebb is lehet a képénél, ha a grafika megengedi) és meghatározhatjuk a gombok egymás közötti távolságát:

#menu a {
	display:block;
	background:url("képállomány") no-repeat;
	width: szélesség;
	margin-top: 5px;
	font: betűtípus;
	color: szín;
	text-align: center;
	line-height: 30px
}

Nincs más hátra, mint a HTML-kódban hivatkozni a stíluslapon definiált elemekre:

<div id="menu">
   <a href="URL_1">1. menüelem</a>
   <a href="URL_2">2. menüelem</a>
   stb.
</div>

A fenti képet és kódot használtam fel a menükhöz (igazodva e hálóhely arculatához; belátom, nem lett valami fényes az eredmény):

Nagyon hasonló a helyzet, ha a menüelemek vízszintesen helyezkednek el, mindössze a float tulajdonságot kell felvenni:

#menu a {
	float: left;
	display: block;
	background: url("képállomány") no-repeat;
	width: szélesség;
	margin-right: 5px;
	font: betűtípus;
	color: szín;
	text-align: center;
	line-height: 30px
}

A menüelemek közötti távolságot az első esetben (az MS IE 6.0 miatt, mert az alsóra valamiért érzékeny) a felső, a második esetben a jobb oldali margó értéke határozza meg.

Mindehhez a böngészőnek ismernie kell a CSS-t. Az alapötletre a Fast Rollovers Without Preload oldalon bukkantam; az eligazodásban segített a W3C CSS 2.1 Specification oldala.