Hi:
I have been trying to get this code to work for a while now and cannot figure out what is wrong. It is for a tri state rollover with images. (I know that I can do this with CSS so please do not answer with that.) The goal is, I am trying to learn jquery and as part of the learning I am trying to figure out what I am missing here.
What I am having issues with is when you do the mouseover and mouseout events the buttons highlight correctly. However, when I click on a button then click on another button all the buttons that I click stay on. I need to be able to toggle the on state as on click each image like a typical tab control.
I know that there are better ways of doing this, but I am really trying to learn what I did wrong and I am extreemly frustrted. So if there is anyone out there that can help specifically fix the code I am posting I would really appreciate it. Again, I know that this could be accomplished with certain css techniques, but I would like to understand what I am doing wrong here.
Thanks in advance.
$(document).ready(function() {
var clicked_obj;
$("#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");
});
}).click(function() {
if ( clicked_obj ) {
$(clicked_obj).removeData("clicked").mouseout();
}
clicked_obj = this;
$(this).data("clicked", true);
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif");
});
});
});
</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>
</body>
</html>