I have 7 images (categories) each of which represent a div. all these divs are located at the same location on a web page. what I want to happen is when one of the images is clicked, the div for that image becomes visible and active while the others become hidden and inactive. I don't know the best way to do this using javascript. I'm guessing that each image will trigger the javascript function when clicked such as:

HTML Code:
<a href="#" onclick="ChangeCatagory(1);return false;"><p>Additions</p><img src="imagini/preview/additionDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(2);return false;"><p>Basements</p><img src="imagini/preview/basementDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(3);return false;"><p>Baths</p><img src="imagini/preview/bathDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(4);return false;"><p>Decks &amp; Porches</p><img src="imagini/preview/deckDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(5);return false;"><p>Interiors</p><img src="imagini/preview/interiorDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(6);return false;"><p>Kitchens</p><img src="imagini/preview/kitchenDefault.png" /></a>
<a href="#" onclick="ChangeCatagory(7);return false;"><p>Specialty</p><img src="imagini/preview/poolDefault.png" /></a>
I'm also guessing each div tag would have an id and style such as:
HTML Code:
<div id="category1" style="display:block">additional html</div>
<div id="category2" style="display:hidden">additional html</div>
<div id="category3" style="display:hidden">additional html</div>
<div id="category4" style="display:hidden">additional html</div>
<div id="category5" style="display:hidden">additional html</div>
<div id="category6" style="display:hidden">additional html</div>
<div id="category7" style="display:hidden">additional html</div>
and the javascript function will contain some sort of loop to "turn on or off" the divs accordingly.

I was hoping someone would let me know if I'm on the right track and show me what that function would look like.