Looking for advice on what approach to take for multiple image swaps
<p>I'm working on designing an interactive university campus map and need some direction with what I am looking to do.</p>

<p>Link to page: <a href="http://www.torontoclassfind.com/startpage.html" rel="nofollow">http://www.torontoclassfind.com/startpage.html</a></p>

<p>I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.</p>

<p>I could do that with the following: </p>

<pre><code>$("#buildinglink1").click(function () {
   $("#buildingimg1").attr("src","highlightedimage.gif")
})
</code></pre>

<p>Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.</p>

<p>The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.</p>

<p>I am thinking of using JQuery's .replace element to do this (ex: <a href="http://stackoverflow.com/questions/6955933/jquery-remove-part-of-url">jquery remove part of url</a>) which would remove or add the 'c' to the url, but I'm kind of lost from here.</p>

<p>Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.</p>
