...

View Full Version : Rollover Buttons



creativemind
05-24-2008, 03: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

Thanks!!

BWiz
05-24-2008, 04: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";
</style>
....
<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.

creativemind
05-24-2008, 04:50 AM
Hi BWiz!

I have attached the 2 buttons to play around with.

Thanks!

timehAndGod
05-24-2008, 06: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'*;
background-repeat:no-repeat;
width:*link width's here*;
}

a.link {
display:block;
height:*image height here*;
background-image:url(images/image.jpg);
}
a.link:hover {
background-image:url(images/imageHover.jpg);
}

a.link2 {
display:block;
height:*image height here*;
background-image:url(images/image2.jpg);
}
a.link2:hover {
background-image:url(images/image2Hover.jpg);
}

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" />
</span>

creativemind
05-26-2008, 12:54 AM
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.

Thanks!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum