CollyLogic: Smart CSS multi-element rollovers

Smart CSS multi-element rollovers

2nd December 2004

Update: In addition to this article, Colly’s Advanced rollover generator is up and ready. Find out more about the generator here.

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.

Simon Collison published this on 02/12/04, at 4:02 PM

Comments

This is really well thought out.

I think the power of this could really be leveraged with a server-side script to auto-generate the image from either:
1) taking two images and placing them side-by-side into one image and serving that up for you, or
2) taking one image, duplicating it, color shifting it, placing them side-by-side and then serving that image up

That would be pretty useful and easier to update.

PHP could do that fairly easy.

02/12 at 21:07 from Nathan

This is a great solution. It creates a lot of flexibility inside the box. I’m STILL building my own site, but definitely going to incorporate this technique. Cheers Colly.

03/12 at 11:17 from James

Nathan: Love the idea of the script. Maybe I’ll try to incorporate that into our CMS for the client. If I have any luck I’ll post the results.

James: One day I’ll click your name :]

03/12 at 11:36 from Simon Collison

Simon,

Did you consider using the :hover pseudo-class on another element, e.g. a div or p?

What you’ve got works brilliantly (obviously!), but I just wondered…

03/12 at 13:50 from Tim

On the site we used this on, we define all three links that appear in the “header” in an unordered list with the rollover CSS, so there’s no need to apply the class to each link in the markup. The list makes it degrade very well with CSS turned off.

However, if each background image has to be different, you need a different class for each, so the classes need to be declared in the markup.

03/12 at 14:45 from Simon Collison

I’m having a great time picking the brains of those who love to fiddle around with stuff so I don’t have to. Many thanks for these great tutorials, you’ve saved me and my company a ton of training funds.

Why aren’t people screaming at the browser vendors to fix their bugs, instead of showing how clever they are to find work-arounds. Am I missing something? Another point I don’t get is why use one of these arcane browsers (Safari, Opera) that obviously, according to reports in these forums, are laden with problems that most web developers don’t deal with, and thus render poorly?

07/02 at 21:00 from Dorsey

Safari’s hardly an “arcane” browser!

14/02 at 14:26 from Lawrence

Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

Commenting is not available in this section entry.