I have two image based links that open external an page in a <div>.
I am changing the background via hover from the CSS.
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My JS:
$('.cs_contact').click(function() {
$(this).removeClass("cs_contact");
$(this).addClass("cs_contact_a");
});
My HTML:
<div id="cs_links">
<div id="cs_contact">
<a class="cs_contact" id="js_contact" href="#"></a></div>
<div id="cs_appoint">
<a class="cs_appoint" id="js_appoint" href="#"></a></div>
</div>
I discovered how to make one image link ACTIVE via js, but I don't
know how to make the two links toggle with each other. I can only
have ONE LINK active at a time.
I have 10 more image links to add to this page.
Many thanks.
Erik
