Ok I am still having some issues with this code below. I have received some guidance from some SO users and I appreciate that.
However, I am still perplexed with what I am doing wrong here. I have a basic rollover jquery script using images. However, when the user clicks one of the images I want that image to stay in the “active/clicked” state. If another image is clicked I want that one in the “active/clicked” state and the previously active/clicked image to go back to the off state.
Basically, I want this to work like a tab control Off, On, Active. The code below works with the exception of the clicks. When I click on the image it turns “active”. But when I click on another image it does not toggle the previously clicked image so I end up with all the images in the “active” state. I have tried everything I can think of and have searched google for the answer but everything I try ends up with the same result. All the images stay “active” when clicked instead of toggling.
Can someone please take a look and help me figure out what I am missing here. I just started with jquery and I am still learning my way around. By the way I know that this can be done with CSS but since I am trying to learn I would rather understand what I am doing wrong then just moving on to another method. So please do not suggest that I do this with CSS as an answer. Thanks in advance.
$(document).ready(function() {
var sel;
$("#nav a").mouseover(function() {
if ( $(this).data("clicked") ) { return; }
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif");
});
}).mouseout(function() {
if ( $(this).data("clicked") ) { return; }
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif");
});
//handle clicks
}).click(function() {
if( sel != null ) {
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");
});
}
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_on.gif$/ig,"_clk.gif");
})
sel = this;
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="nav">
<div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div>
<div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0"/></a></div>
<div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
<div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
</div>
Well - Your click function will need to look at all the images in #nav to see which one is clicked and turn it off.
Instead of:
$(this).children("img").each(function() { this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif"); });
Try:
$("#nav").find("img").each(function() {
this.src = this.src.replace(/_clk\.gif$/i, "_off.gif");
});
Also - Two things to point out: First the . character should be escaped \. in your regexp. Second: if you are using this.src = why not just replace on this.src as well?