Hod I do CSS Rollover Buttons without Javascript?
Thanks!Depends on how you want to do it.
Do you want to change the image of the button when you roll over it, or do you want to change the text style of a link when you roll over it?I have an image (home_off) and I want to change that image to a different one (home_on) once the mouse is over.Best way to do this would probably be this:
In the HTML document have:
<a class="home" href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" />
Then in the CSS document have:
a.home:link, a.home:visited, a.home:active {
width: imagewidth;
height: imageheight;
background-image: url("home_off.jpg");
}
a.home:hover {
background-image: url("home_on.jpg");
}
Obviously you'll need to change some of the stuff, and add some stuff to make it look right but thats the basic.The main problem if you want to do it with no JavaScript is that IE only supports the :hover pseudo-class for <a> link elements. Thus you can only do a pure CSS solution if the element to be affected is either an <a> link element or a child element of a link (assuming you want it to work on IE as well as on real browsers).
Thanks!Depends on how you want to do it.
Do you want to change the image of the button when you roll over it, or do you want to change the text style of a link when you roll over it?I have an image (home_off) and I want to change that image to a different one (home_on) once the mouse is over.Best way to do this would probably be this:
In the HTML document have:
<a class="home" href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" />
Then in the CSS document have:
a.home:link, a.home:visited, a.home:active {
width: imagewidth;
height: imageheight;
background-image: url("home_off.jpg");
}
a.home:hover {
background-image: url("home_on.jpg");
}
Obviously you'll need to change some of the stuff, and add some stuff to make it look right but thats the basic.The main problem if you want to do it with no JavaScript is that IE only supports the :hover pseudo-class for <a> link elements. Thus you can only do a pure CSS solution if the element to be affected is either an <a> link element or a child element of a link (assuming you want it to work on IE as well as on real browsers).