open and close on mouse click to change a part of a page

I am building a page with a portfolio in Dreamweaver CS4 with HTML and CSS. The page will have a 'box' which contains small images representing different pieces of work. When clicking on one of the small images, I want to load a new 'box' on top of the old box, which contains information about that piece. The new box should totally cover the old box and the new box needs to have a 'close' function which will then remove it and again reveal the original page. While the box changes, I'd like the rest of the page to stay exactly as it is. I want to have this function for each of the small images.

I am a beginner with limited knowledge so I'm looking for the easiest way to do this, and would really a开发者_StackOverflowppreciate any advice.

Thanks in advance!

jQuery Captify Plugin

There are many ways to do this, all of them would involve javascript. Sample HTML:

<div class="smallimage">
    <img src="...." />
    <div class="explanation">Lorem ipsum blah</div> 
</div>

Having set .explanation to display: none, you can use some jquery code like this to display/hide it when the image is clicked (put it in your document.ready function)

$('.smallimage').click(function(){
    $('.explanation', this).toggle();
});

Create one container (like a div) and let it have two children, one being the 'old box', containing the thumbnail, one being the 'new box' containing the info. Style both of these children to occupy their parent completely.

Now just set the display to none on the 'new box' and use javascript to toggle which one is shown. I suggest you look into jQuery for this.

So you'll have something like:

<div class="container">
  <div class="thumbnail">
    <a href="#" class="toggleLink">
      ...
    </a>
  </div>
  <div class="info">
    <a href="#" class="toggleLink">
      ...
    </a>
  </div>
</div>
<script type="text/javascript">
  $(function(){
    $('a.toggleLink').click(function(){
      var container = $(this).closest('div.container');
      $(container).find('div.thumbnail').toggle();
      $(container).find('div.info').toggle();
    });
  });
</script>

Disclaimer: I didn't actually test this code, but it should be about right. Use it as a concept, don't just copy-paste it.