For something like this, you'd be best off having all 4 states of the button in a single graphic file, one under the other, and using the background-position to control it.
The image would be 4 times as big as the allocated div or li, with only a quarter of it showing at a time depending on the starting backgroundPosition.
Instead of swapping the image, you'd move the [top] backgroundPosition to 0%, 25%, 50% or 75%, as required
Then, the logic for a "reset" would be $(".buttonClass").css({backgroundPosition:"top"}), or something like that.
L leofromrio wrote:
Hi there, Let me begin by saying I know very little about jQuery and would love to learn a lot more about it (so i don't have to waste people's time on questions like the one I'm about to ask) I am trying to design a graphic menu bar that is capable of displaying each button in 4 modes: up (neutral), hover, down (mouse down), and selected. After some research, I was able to "come up" (by cutting and pasting and burning up a couple of neurons) with the code below. It works well enough but I'm sure it could be written a lot better. What I really would like to do is to change whatever button is "down" to go back "up" once another button is pushed, changing the img src, or by whatever method is more efficient. Thank you for taking the time to read my post. -Leo <script src="js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { // image rollover $(".topmenu img").hover(function() { this.src = this.src.replace("-up","-hover"); }, function() { this.src = this.src.replace("-hover","-up"); }); }); </script> <script type="text/javascript" charset="utf-8"> $(function() { // image mousedown $(".topmenu img").mousedown(function() { this.src = this.src.replace("-hover","-down"); }, function() {}); }); </script> <script type="text/javascript" charset="utf-8"> $(function() { // image mouseup $(".topmenu img").mouseup(function() { this.src = this.src.replace("-down","-selected"); }, function() {}); }); </script> <div class="topmenu"> <img src="images/navmenu/bar-left-end.jpg" width="4" height="35" alt=" " /><a href="#"><img src="images/navmenu/btn-home-up.jpg" alt="Home" width="66" height="35" /></a><a href="#"><img src="images/ navmenu/btn-photoworks-up.jpg" alt="Photo Works" width="124" height="35" /></a><a href="#"><img src="images/navmenu/btn-blog- up.jpg" alt="blog!" width="60" height="35" /></a><a href="#"><img src="images/navmenu/btn-portfolio-up.jpg" alt="Portfolio" width="88" height="35" /></a><img src="images/navmenu/bar-right-end.jpg" width="4" height="35" alt=" " /> </div><!-- end topmenu --> ------------------------------------------------------------------------ No virus found in this incoming message.Checked by AVG - www.avg.com Version: 8.5.387 / Virus Database: 270.13.14/2238 - Release Date: 07/14/09 18:03:00
