View Full Version : Rollover Buttons

05-24-2008, 02:56 AM
Hi all!

I am trying to see if it is possible to make a rollover buttons from an external style sheet. The HTML page will contain DIV tag. These buttons will be made from GIF or JPEG images. I know how to make the rollover buttons from Dreamweaver CS3 but inserting these buttons as a rollover into a <TD> tag.

I am trying something different by using DIV tag and using a external style sheet to control these rollover buttons.

If you need


05-24-2008, 03:29 AM
Are you looking for something like this:

/* External "style.css" stylesheet */
div.rollover {
background-image: url("no-hover-state-image.jpg");
width: 300px;
height: 75px;
div.rollover:hover {
background-image: url("hover-state-image.jpg");

<!-- HTML -->
<style type="text/css">
@import "style.css";
<div class="rollover">Roll me, baby.</div>
It uses pseudo-classes, so it won't work in IE6 for sure, and I don't think it will work in IE7 (can't remember though). Should work on all other rendering engines.

05-24-2008, 03:50 AM
Hi BWiz!

I have attached the 2 buttons to play around with.


05-24-2008, 05:15 AM
I just recently implemented the exact thing you are after. It works in most browsers including IE6.

Here is the code for the CSS:

div.linkcont a {
background-position:*Image position here eg. 'top left'*;
width:*link width's here*;

a.link {
height:*image height here*;
a.link:hover {

a.link2 {
height:*image height here*;
a.link2:hover {

And the HTML:

<div class="linkcont"><a href="#" class="link"></a></div>
<div class="linkcont"><a href="#" class="link2"></a></div>

EDIT: I would also recommend preloading the hover images to prevent lag on the hover:

<span style="display:none;">
<img src="images/imageHover.jpg" alt="Preload Image" />
<img src="images/image2Hover.jpg" alt="Preload Image" />

05-25-2008, 11:54 PM
Hi timehAndGod,

I tried what you did but it didn't show anything. I have attached the HTML page and the external style sheet for you to look at. I also attached new buttons to test on. These buttons you can really tell if it's working or not.


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum