Please post the code that applies to this problem. That way the people here can respond faster and better without having to dig through your site to find out what's relevant.
Anyway, here's a simple alternative to what you're trying to do:
HTML
<div id="navigation">
<a id="foo" href="#"> </a>
<a id="bar" href="#"> </a>
<a id="baz" href="#"> </a>
</div>
CSS
a#foo {
background: url('foo-inactive.png') no-repeat;
}
a#foo:hover,
a#foo.active {
background: url('foo-active.png') no-repeat;
}
This gives you the hover effect. Do the same for other id's. Add some padding so that the link is wide enough to display the image in the background. Or use display="block"
and width/height attributes.
Now when someone clicks the image, give it the active
class that does, looking at the CSS, the same thing as the :hover
effect. If clicking the image brings you to another page, simply add it in the HTML (<a id="foo" class="active"...
), if you stay on the same page, do something like this:
jQuery
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});