Yuk that is nasty. First it limits the artwork in a major way. You want to be able to create an image for each state.
And it is far more work to make the graphic on that site then it is to make nice arty images of the 3 state buttons. You can find free button graphics all over the net. John: Your adding a class to make the states change. So that implies the images are defined in the CSS. Would it not be much easier to make this three containers on top of each other, each with its own graphic, and just alter the visibility of the div? Here is what I had in mind. The only problem with it I see is that there is flicker when you get the hover state. The problem is that a mouseovers are being sent when you move the mouse a tiny bit. I could not think of a way to stop that other then delaying the period of time the hover state is on a few hundred milliseconds. http://www.whatbird.com/wwwroot/3StateButton.html The code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 3 State Button</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/jscript"> $(document).ready(function(){ /* testing mouse events in jQuery */ $("#normal").show(); $("#hover").hide(); $("#down").hide(); /* show top layer hover */ $('#normal').mouseover(function(){ $("#hover").show(); }); /* hide top layer hover */ $('#normal').mouseout(function(){ $("#hover").hide(); $("#normal").show(); }); /* */ $('#normal').click(function(){ $("#hover").hide(); $("#down").show(); $("#normal").hide(); }); }); </script> <style type="text/css"> <!-- #hover { position:absolute; width:94px; height:32px; z-index:3; left: 174px; top: 45px; } #normal { position:absolute; width:94px; height:32px; z-index:2; left: 174px; top: 45px; } #down { position:absolute; width:94px; height:32px; z-index:1; left: 174px; top: 45px; } --> </style> </head> <body> <table width="363" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="94"> <div id="normal"><img src="images/b_normal.gif" width="93" height="29" /></div> <div id="hover"><img src="images/b_hover.gif" width="93" height="29" /></div> <div id="down"><img src="images/b_down.gif" width="93" height="29" /></div></td> </tr> </table> </body> </html> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka Sent: Tuesday, July 24, 2007 4:13 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: 3 state buttons - is there a best way Is there a reason why not to use pure CSS for this? http://www.commadot.com/jquery/buttons/ I use this method for buttons alot. No flicker. Tested in IE6/7, FF, Safari. John, in your example you can't have div.buttons.hover. That doesn't work in IE6 unfortunately. I WISH it did. (http://commadot.com/?p=528) Glen On 7/24/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: Can anyone point me in the best direction for setting up a three state button using images (up, down and hover). I can imagine a lot of different ways to do it. Each button should be unique (have its own ID). --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery (English)" group. To post to this group, send email to jquery-en@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-en?hl=en -~----------~----~----~----~------~----~------~--~---
