用多個鏈接覆蓋多個外部頁面或div

Question

我有一組帶有標題的圖像（來自http://www.hongkiat.com/blog/css3-image-captions/ ），希望能夠單擊它們，並使其覆蓋隱藏的div或加載外部網頁作為疊加層（只要工作正常，我也不為之煩惱！）。 我還希望每個圖像都鏈接到不同的頁面/ div。 我嘗試了很多沒有成功的事情，所以將不勝感激。 這是我的圖像代碼（是的，出於測試目的，兩次出現）：

<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

請在注釋中回答您的第二個問題：“我什至無法獲得一個簡單的鏈接來彈出彈出窗口。我對JQuery還是很陌生，所以我應該如何鏈接到JQuery，應該在哪里放置腳本以及如何實現您正在處理的img和attr內容？”，這是一個截圖，顯示了您所需的一切。

Answer 2

僅使用CSS很容易。

看看這個小提琴吧： http : //jsfiddle.net/VgLVq/

要使div可點擊，只需將其包裝在具有所需URL的<a>標記中。

然后將.box在position: relative並將每個孩子放置在position: absolute 。 我使用了選擇器.box>* 。

然后將.caption為display:none並添加以下CSS來檢測鼠標懸停：

a:hover .caption{
    display:block;
}

Answer 3

我為您制作了一個小提琴，它可以做您想做的事情。 在不知道您打算用於加載相關頁面的圖像的哪些唯一值的情況下，我提供了一些示例代碼：

工作小提琴在這里：
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;
}