CSS onclick show hide divs

This is a simple element rotator that just needs a few simple adjustments. Before I go into discussing this, when creating effects like this, you have to constantly think of "consolidation." The approach I took here does a bit of consolidation that also serves to simplify your document. Here we go...

First off, we'll make a couple of adjustments to your styles like so:

<style type="text/css">
.show {
      display:none;
      height:220px;
      background: #FFFFFF url(logo1.jpg) no-repeat;
      border: 1px solid red;
}
#main_pic{
      height:220px;
      background: #FFFFFF url(campsbay.jpg) no-repeat;
      border: 1px solid green;
}
</style>

Note: I just added a border so I could see the divs. You don't need to set a div to 100% because it'll do that by default. Notice also that I set the 'show' class to display:none. This will make the "3" and "4" divs invisible when you load the page, which is the desired result. 'main_pic' gets no visibilty properties so it'll show at page load.

For the rotator effect, with some simple javascript, here's the function and the div declarations:

<script type="text/javascript">
      function rotateDiv(curDivID,nextDivID) {
            var curDiv = document.getElementById(curDivID);
            var nextDiv = document.getElementById(nextDivID);
            curDiv.style.display = "none";
            nextDiv.style.display="block";
      }
</script>

<div id="main_pic" onClick="javascript:rotateDiv('main_pic','3');">Main Pic</div>
<div id="3" class="show" onClick="javascript:rotateDiv('3','4');">3</div>
<div id="4" class="show" onClick="javascript:rotateDiv('4','main_pic');">4</div>

Notice in the div declarations, I took all the JavaScript logic out of the onClick of each and assigned it to a function. This made them much simpler but also if you ever want to change the show/hide behavior, you can do it one place. Also, the function is set up so you can be flexible with the order of the divs showing and hiding (ie, show div 4 before div 3). But in general, from a code maintenance standpoint, shared or common functionality should be moved to a central function that'll handle behavior. It's a lot easier to code in a single area than in multiple ones.

I put it all together here: http://www.iarchitec.com/test/rotate.html. Just view the source and you'll see how it all works together.

GoofyDawg