I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.
Thanks.
Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.
Check out sprites FTW.
http://css-tricks.com/css-sprites/
A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:
.button
{
display: block;
width: 10px;
height: 10px;
background-image: url(to-image.gif);
background-repeat: no-repeat;
background-position: top left;
}
then on hover, it shifts to the bottom part of the image
.button:hover
{
background-position: bottom left;
}
Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.
<a class="button"></a>
.button {
display: block;
background-image: url(default.gif);
width: 100px;
height: 20px;
}
.button:hover {
background-image: url(hover.gif);
}
