CSS: rollover con una sola immagine di sfondo

Il segreto dei rollover CSS effettuati con una sola immagine di sfondo sta nella scelta delle dimensioni dell'immagine e nell'uso della proprietà background-position. In linea di massima vengono scelte immagini più grandi dell'area di contenuto effettivamente visibile e viene quindi usata la proprietà background-position per mostrare una determinata area dell'immagine. Questa tecnica è diversa dalle sprite CSS: queste infatti sono per lo più icone, mentre con la tecnica che vedremo si possono utilizzare immagini molto più complesse. Vediamo come.

Partiamo da questo menu di navigazione:

<ul id="navigation">
	<li><a href="#" id="home">Home</a></li>
	<li><a href="#" id="about">About</a></li>
	<li><a href="#" id="contacts">Contatti</a></li>
</ul>

Useremo le seguenti immagini di sfondo su ciascuna voce del menu:

Le immagini hanno le dimensioni di 250 per 151 pixel. Ecco come vengono usate nel CSS:

body {
	margin: 0;
	padding: 0;
	border-top: 0.5em solid #222;
	font: 90% Arial, sans-serif;
}

#navigation {
	height: 6em;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid #222;
}

#navigation li {
	float: left;
	height: 100%;
	display: block;
}

#navigation a {
	height: 2em;
	padding: 4em 1em 0.1em 1em;
	float: left;
	line-height: 2;
	background-position: 0 -100px;
	background-repeat: no-repeat;
	color: #fff;
	text-decoration: none;
	display: block;
}

#navigation a:hover {
	background-color: #222 !important;
	background-position: -100px -100px;
}

#navigation #home {
	background-image: url(home.jpg);
	background-color: #c30;
}


#navigation #about {
	background-image: url(about.jpg);
	background-color: #06c;
}
#navigation #contacts {
	background-image: url(contact.jpg);
	background-color: #c60;
}		

Come potete notare, abbiamo usato la proprietà background-position per creare l'effetto di rollover. Ci siamo limitati a mostrare o nascondere una determinata porzione dell'immagine di sfondo.

Potete visionare l'esempio finale in questa pagina.