After some more digging and basic research I was able to come up with
this.
I tried to work with .add/removeClass instead of .css, but couldn't
get it to work the way I wanted to.
This seems to work just fine:
$(document).ready(function() {
$(".btn.up").mouseover( function() {
$(this).css("background-position","0 -35px");
}).mouseout( function() {
$(this).css("background-position","top");
}).mousedown( function() {
$(".btn").css("background-position","top");
$(this).css("background-position","0 -70px");
}).mouseup( function() {
$(this).css("background-position","bottom");
});
});
-Leo
On Jul 15, 6:53 pm, leofromrio <leofrom...@gmail.com> wrote:
> Liam,
> Thank you very much for your input.
> That worked out perfectly! It also reduced the number of server
> requests by a few million.
> Like I said before, I'm sure the code could be written a lot better,
> but here it is anyway:
>
> <script type="text/javascript" charset="utf-8">
> $(function() { // image hover
> $(".topmenu div").hover(function() {
> $(this).css({ "background-position":"0 -35px" });
> }, function() {
> $(this).css({ "background-position":"top" });
> });
> });
> </script>
>
> <script type="text/javascript" charset="utf-8">
> $(function() { // image mousedown
> $(".topmenu div").mousedown(function() {
> $(this).css({ "background-position":"0 -70px" });
> }, function() {});
> });
> </script>
>
> <script type="text/javascript" charset="utf-8">
> $(function() { // image mouseup
> $(".topmenu div").mouseup(function() {
> $(this).css({ "background-position":"bottom" });
> }, function() {});
> });
> </script>
>
> Thanks again
>
> -Leo
>
> On Jul 15, 3:18 pm, Liam Byrne <l...@onsight.ie> wrote:
>
> > 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" onceanotherbutton 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() { // imagerollover
> > > $(".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
