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 <[email protected]> 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
