Question

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 appreciate any advice.

Thanks in advance!

Answer 1

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();
});