swapContent onClick

image thumbnails

[javascriptor]

Hi all,

I'm new to js so bear with me.

I'm using a swap content with two divs. Div 1 has four thumbnails, each in their own div. When you click on one of them, the div containing them (div1) swaps Content with div2 which has the large version of the selected thumb and takes the place of the thumbs. My hope was that you could then click on the large image and return to the thumbnails and that you wouldn't see the other while one was selected.

This swap content is really just a swap class in which div 1 is made invisible when the function is called and then when it's called again it reverts to visible. Here's the html:
<div class="content_container">

<div id="mycontent1">

<div class="row">

<div class="column">
<img src="imagethumbs/image1.gif" onClick="swapContent('mycontent2', 'mycontent1');" class="visible"/>
</div>

<div class="column">
<img src="imagethumbs/image2.gif" onClick="swapContent('mycontent2', 'mycontent1');" class="visible"/>
</div>

<div class="clear"></div>
</div>

<div class="row">

<div class="column">
<img src="imagethumbs/image3.gif" />
</div>

<div class="column">
<img src="imagethumbs/image4.gif" />
</div>

<div class="clear"></div>

</div>

</div>

<div id="mycontent2" onClick="swapContent('mycontent1', 'mycontent2');" class="invisible">
<img src="lgimages/thebigimage"/>

</div>

</div>

</div>

</div>

and here's the JAVASCRIPT code:

function swapContent(visibleId, invisibleId) {
document.getElementById(visibleId).className = 'visible';
document.getElementById(invisibleId).className = 'invisible';
}

and here's the CSS:
.invisible {
display: none;
}

.visible {
display: block;
}
.content_container {

width:500px;
height:500px;
float:left;
font-family:arial;
color:#666;
font-size:.8em;
font-weight:lighter;

THANK YOUR FOR WHATEVER INSIGHTS YOU CAN OFFER ME!

[daveVk]

<div id="thumbs" class="visible">

<div class="row">

<div class="column">
<img src="imagethumbs/image1.gif" onClick="swapContent('big1', 'thumbs');" />
</div>

<div class="column">
<img src="imagethumbs/image2.gif" onClick="swapContent('big2', 'thumbs');"/>
</div>

... etc

<div id="big1" onClick="swapContent('thumbs', 'big1');" class="invisible">
<img src="lgimages/thebigimage/image1.gif">

</div>

... etc for big2..big4

[edited by: daveVk at 12:07 am (utc) on Dec. 16, 2007]