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 -->
