Ryan Rollovers

Example:

Information:

This is a technique for using image replacement CSS rollover buttons while keeping them accessible to users who have images disabled. Try it, disable images and you'll find the text alternative. The only downside is the need for empty spans.

This method should work in; Firefox 1.1+, IE5+, Opera 9, Safari and Omniweb.

I'm sure the technique can be improved upon so comments and/or suggestions are welcome.

Update 06/10/06 - It appears IE6 will sometimes show the background image on mouse-over even if images are disabled.

Single background image for all buttons:

rollover button image

The HTML:

<ul id="nav">
	<li><a href="#" id="roll">Rollover 1<span></span></a></li>
	<li><a href="#" id="over">Rollover 2<span></span></a></li>
</ul>

The CSS:

ul#nav {
	list-style: none;
	height: 25px;
	width: 208px;
	}
	
ul#nav li {
	float: left;
	clear: none;
	margin: 0 4px 0 0;
	overflow: hidden;
	display: inline; /* fix IE double width margin bug*/
	}

ul#nav li a {
	display: block;
	position: relative;
	width: 100px;
	height: 25px;
	color: #55637e;
	background: #eee;
	font-size: 1.2em;
	text-align: center;
	}
	
ul#nav li a span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(rollover.gif);
	}
	
ul#nav li a#roll:hover span { background-position: 0 -25px; }
	
ul#nav li a#over span { background-position: 0 -50px; }

ul#nav li a#over:hover span { background-position: 0 -75px; }
	
ul#nav li a:hover {
	cursor: pointer;
	background-color: #55637e;
	color: #fff;
	text-decoration: none;
	}