This is one of those things that should be straightforward, and just isn't. It also tells you that just because you can so something with CSS doesn't necessarily mean it's a good idea. But here you have it -- a CSS image rollover for button backgrounds.

I didn't write this one [but, shockingly, have tweaked it] and I don't remember from whence it came, but it seems to work more seamlessly in the major browsers -- and refrains from mucking about with global variables more -- than others out there. Cleverly done. I've even tied it in with the youngpup menu system elsewhere in this section.

Here's the CSS -- which is going to look a little odd, but I promise it'll all make sense. Kind of.

a.doImg { 
	display: block; 
	height: 26px; 
	width: 156px; 
	background: url(img_code/css_link.gif) left bottom no-repeat; 
	text-decoration: none; 
	color: #005292;
}

.doImg .txt {
	font-size: 11px;
	text-align: left;
	width: 128px;
	padding-top: 7px;
	text-transform: lowercase;
	margin-left: 32px;
}

a.doHov:hover { 
	background: url(img_code/css_link_on.gif) left bottom no-repeat; 
	color: #000000;
}

body a.doAct:active { 
	background: url(img_code/css_link_on.gif) left bottom no-repeat; 
}

.vmenu_cheater {
	width: 156px;
}

Then, let's look at the href for the image you want to roll:

<div class='vmenu_cheater'><a href="#" class='doImg doHov'><div class='txt'>Home</div></a></div>

What you're essentially doing is fooling the browser -- and telling it to act like two separate DIVs, doImg & the defined link doHov. Very cool.

Here's a working example:

• Once again, no preloader. But since you're generally working with one image, goes great -- so long as that's all you want.
• Tough to get very complex here -- but it does have it's uses.
• The hack 'vmenu_cheater' is to make Mozilla behave, this time.
• I've never been able to defeat the 'flicker' effect in IE as redraws are done -- but I've never really seen it beaten anywhere else, either.