|
womble -> RE: Rollover button without javascript (3/9/2007 8:57:50)
|
Yep, you need two images and to shift the "hovered" image on hover using the CSS. There was an example I had lying around here somewhere, but as usual I can't find it. Here's an example of it used as a menu. If you view the source of that page (the CSS for each menu shown is in the page) you'll see the background position is changed for the hover state, e.g.:
#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(images/menu2.gif);
padding: 8px 0 0 10px;
}
#menu2 li a:hover {
color: #283A50;
background: url(images/menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}
I used a similar idea on a site to replace a standard submit button on a form with a CSS rollover by just putting the images together as they've done on those menus. <edit>It's probably better explained here) On the hover state the background image shifts down to show the highlighted state. No idea where I put the code of the form I used, but I did manage to dig out the image, so you can see how they fix together. The top one was the normal state, the middle one the hover state, and the bottom one the pressed state. Unfortunately the 'pressed' state doesn't work cross browser without some javascript IIRC, and I've not been able to figure out/find a pure CSS method to get reliable 3 state cross browser functioning for a submit button, but it'll work for the hover state at least. There's plenty of CSS/javascript mixes out there though.
[image]local://upfiles/14943/1ECC3DA644234269860346AB691C8E6E.gif[/image]
|
|
|
|
