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:[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). > > > > > > >
