Menu
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:
[code=html]
<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 & 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:
[code=html]
<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.