[jQuery] <a>, hover & active
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">I have two image based links that open external an page in a <div>.<div>
</div><div>I am changing the background via hover from the CSS.</div><div style="font-size: 15px; ">
</div><div style="font-size: 15px; "><b>My CSS:</b></div><div style="font-size: 15px; ">
</div><div><div style="font-size: 15px; ">#cs_contact<span class="Apple-tab-span" style="white-space:pre"> </span>{width: 146px; height: 34px; float: left;}</div><div style="font-size: 15px; ">a.cs_contact<span class="Apple-tab-span" style="white-space:pre"> </span>{width: 146px; height: 34px; background: url('/img/pages/cs_contact.png'); display:block}</div><div style="font-size: 15px; ">a.cs_contact:hover<span class="Apple-tab-span" style="white-space:pre"> </span>{background-position: -146px;}</div><div style="font-size: 15px; ">a.cs_contact_a<span class="Apple-tab-span" style="white-space:pre"> </span>{width: 146px; height: 34px; background: url('/img/pages/cs_contact.png'); display:block;background-position: -146px;}</div><div style="font-size: 15px; "><span class="Apple-tab-span" style="white-space:pre"> </span></div><div style="font-size: 15px; ">#cs_appoint<span class="Apple-tab-span" style="white-space:pre"> </span>{width: 146px; height: 34px; float: left; margin: 10px 0px 0px 0px}</div><div style="font-size: 15px; ">a.cs_appoint<span class="Apple-tab-span" style="white-space:pre"> </span>{width: 146px; height: 34px; background: url('/img/pages/cs_appoint.png'); display:block}</div><div style="font-size: 15px; ">a.cs_appoint:hover<span class="Apple-tab-span" style="white-space:pre"> </span>{background-position: -146px;}</div><div style="font-size: 15px; ">
</div><div style="font-size: 15px; "><b>My JS:</b></div><div style="font-size: 15px; ">
</div><div style="font-size: 15px; "><div><span class="Apple-tab-span" style="white-space:pre"> </span>$('.cs_contact').click(function() { </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> $(this).removeClass("cs_contact"); </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> $(this).addClass("cs_contact_a"); </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> }); </div><div></div><div><b>My HTML:</b></div><div>
</div><div><div><div id="cs_links"></div><div><div id="cs_contact"></div><div><a class="cs_contact" id="js_contact" href="#"></a></div></div><div><div id="cs_appoint"></div><div><a class="cs_appoint" id="js_appoint" href="#"></a></div></div><div></div></div><div></div></div></div><div style="font-size: 15px; ">
</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.</div><div>
</div><div>I have 10 more image links to add to this page.</div><div>
</div><div>Many thanks.</div><div>
</div><div>Erik</div><div>
</div><div style="font-size: 15px; ">
</div></div></body></html>