This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Smart CSS multi-element rollovers

3rd December 2004

CSS rollovers are pretty common and well documented. However, for a recent project, I needed to make a button that revealed some background colour, contained markup text, and a border-less image. I also had to ensure all three elements could be easily edited. Straightforward? No. Neither text nor the text background could be part of the image, so I needed a CSS workaround.

Finally, this is working cross-browser. Here is an example of a working button to get a better idea. The CSS is short and sweet, but it is worth explaining one or two elements, and a couple of rules. Read on…

A couple of rules

One caveat regarding Safari. Be sure to cut images to exact size between base of background header and bottom border, as it sometimes - and this is sporadic - will force the image to overflow under the bottom border. Get the exact size by subtracting your box height by the depth of your background-position. In the example below, this works out as 135px - 35px = 100px image height.

Also, if you are using one image, using background-position to “slide the doors”, be sure to set your images side-by-side, rather than above-and-below. Due to the empty space created for the background header, we must leave that blank, so moving an image up is not an option. Your image needs to move left and right.

And, be sure to declare your visited and active link states, as to not do so confuses the hell out of IE (PC). Anyway, here is the important stuff.

Very simple CSS

.smart_rollover {
	float: left;
	width: 200px;
	height: 135px;
	border: 1px solid #000;
	text-align: center;
	color:#FFF;
	background: #000 url(smart_rollover_image.jpg) no-repeat 0 35px;
}
a.smart_rollover:link, a.smart_rollover:visited, a.smart_rollover:active {
	color: #FFF;
	text-decoration: none;
	background: #000 url(smart_rollover_image.jpg) no-repeat 0 35px;
}
a.smart_rollover:hover {
	color: #FFFF99;
	background: #333399 url(smart_rollover_image.jpg) no-repeat -200px 35px;
}

It should be easy to configure that to suit your needs. remember that decreasing/increasing image width/height requires adjustments to the CSS, and that this knocks on to your background-position rule. I have removed font-styling properties from the example to keep it small.

Example image

Remember, go side-by-side, not above-below.

Calling the style

Couldn’t be easier. Just add the class=“smart_rollover” declaration to the link.

<a href="" class="smart_rollover">
Here is the link text generated from the XHTML markup
</a>

Browser support etc

As it stands, this is worlking on Firefox 1.0, Safari, IE 6.0 (PC) - and even IE Mac. Let me know if you spot a problem in another browser. Also, I’ve done my best to condense the CSS, but it won’t work unless I leave ALL the repeated statements in place. Maybe you can shrink it a bit more? If so, post your methods here. You can grab the CSS and markup from the example.

Responses