Overlaying multiple external pages or divs with multiple links

Question

I have a group of images with captions (from http://www.hongkiat.com/blog/css3-image-captions/ ) and would like to be able to click on them and have them overlay either a hidden div or load an external page as an overlay (I'm not fussed on either as long as it works!). I'd also like each image to link to a different page/div. I've tried lots of things without success so much help would be appreciated. Here's my code for the images (and yes one appears twice for testing purposes):

<div id="mainwrapper">
  <table>
    <tr>
      <td>
        <div id="box-1" class="box">  
          <img id="image-1" src="img/agent.png"/>  
          <span class="caption full-caption">  
            <h3>Agent Demo</h3>  
            <p>Java Group Project</p>
          </span>  
        </div> 
      </td>

      <td>
        <div id="box-2" class="box">  
          <img id="image-2" src="img/wizardsbook.png"/>  
          <span class="caption full-caption">  
            <h3>The Wizard's Book</h3>  
            <p>Java Game</p>  
          </span>  
        </div> 
      </td>

      <td>
        <div id="box-3" class="box">  
            <img id="image-3" src="img/wizardsbook.png"/>  
            <span class="caption full-caption">  
              <h3>The Wizard's Book</h3>  
              <p>Java Game</p>  
            </span>  
        </div> 
      </td>
    </tr>
  </table>
</div>

Answer 1

per your 2nd question in the comments "I can't even get a simple a link to bring up the popup. I'm kinda new to JQuery so how should I link to JQuery, where should I put the script and how do I implement the img and attr things you're on about?", here is a screenshot that shows everything you need.

Answer 2

That is easy with CSS only.

Take a llok at this fiddle : http://jsfiddle.net/VgLVq/

To make the div clickable, just wrap it in a <a> tag with the URL you want.

Then make the .box in position: relative and every of his children in position: absolute . I used the selector .box>* .

Then make the .caption in display:none and add this CSS to detecte the hover :

a:hover .caption{
    display:block;
}

Answer 3

I built a fiddle for you that does what you're trying to do. Without knowing which unique values of the images you intend to use to load the related page, i provided some sample code:

working fiddle is here:
http://jsfiddle.net/acturbo/YVBpj/

javascript:

$().ready(function() {

    $("#close").on("click", function(){
        $("#popup").hide();
    });

   // uncomment this line to attach this "showWindow" to all the images
   // then, use $(this) to access the specific image that was clicked

    //$("img").on("click", function(){
    $("#showWindow").on("click", function(){

        // when you switch to images, you can access unique attributes
        // of the clicked image using attr()
        // this will let you load unique pages for each image
        // eg. can use 1 or 2
        // var value1 = $(this).attr( "src" );
        // var value2 = $(this).attr( "id" );
        //$("#popup").load( value1 );

        $("#popup").show();
    });

});

html:

<div id="popup">
    <p>this is hidden until the image is clicked</p>
    <a href="#" id="close">Close Window</a>
</div>    

<a href="#" id="showWindow">Show Window - mimic an image click</p>

<div id="mainwrapper">
  <table>
    <tr>
      <td>
        <div id="box-1" class="box">  
          <img id="image-1" src="img/agent.png"/>  
          <span class="caption full-caption">  
            <h3>Agent Demo</h3>  
            <p>Java Group Project</p>
          </span>  
        </div> 
      </td>

      <td>
        <div id="box-2" class="box">  
          <img id="image-2" src="img/wizardsbook.png"/>  
          <span class="caption full-caption">  
            <h3>The Wizard's Book</h3>  
            <p>Java Game</p>  
          </span>  
        </div> 
      </td>

      <td>
        <div id="box-3" class="box">  
            <img id="image-3" src="img/wizardsbook.png"/>  
            <span class="caption full-caption">  
              <h3>The Wizard's Book</h3>  
              <p>Java Game</p>  
            </span>  
        </div> 
      </td>
    </tr>
  </table>
</div>

css

#popup{
    top: 10px;
    left: 10px;
    width: 300px;
    height: 100px;
    position: absolute;
    background: red;
    display: none;
}