|
| |
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
 |
Rollover button without javascript - 3/9/2007 7:53:38
I would like to show a hover effect on my button without using javascript to swap images. Is it possible?
Here's the page with the Book Here button.
Thanks for any thoughts on this.
spinningjennie
|
|
|
|
womble
Posts: 5461
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
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.
Thumbnail Image
 Attachment (1)
< Message edited by womble -- 3/9/2007 9:07:20 >
_____________________________
~~ "A cruel god ain't no god at all" ~~
| |
|
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
|
RE: Rollover button without javascript - 3/12/2007 7:52:25
Thanks so much Womble for your detailed answer, which worked beautifully for the link and the hover!
Kind regards,
spinningjennie
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
