"Limits the artwork" in the sense the middle portion of all you images must be a stretched background slice, so you can't reproduce all the subtle affects of switching images. You have to produce the end caps from a sliced piece of artwork so this sort of tosses out a lot of high quality graphics.
I saw an example somewhere that used the "hover" compound event in jQuery to toggle between two classes, one representing the normal state button image and the other the roll over image. You can use hover to toggle the a '.hiddenl class that would contain a display: none. If I was smarter I could just write this myself. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka Sent: Tuesday, July 24, 2007 6:56 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: 3 state buttons - is there a best way What is nasty? The sprite technique is pretty popular specifically because it eliminates flicker and doesnt require javascript. Im not sure what you mean by "limits the artwork" either. Seems pretty easy to make anything. Normally, I am all for the jQuery method, but this one seems off. Glen On 7/24/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: 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: <mailto:jquery-en@googlegroups.com> [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).
