1

我有一组带有标题的图像（来自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>
4

3 回答 3

1

根据评论中的第二个问题“我什至无法获得一个简单的链接来弹出弹出窗口。我对 JQuery 有点陌生，所以我应该如何链接到 JQuery，我应该把脚本放在哪里以及如何实现你正在讨论的 img 和 attr 事情？”，这是一个屏幕截图，显示了你需要的一切。

在此处输入图像描述

于 2013-05-09T16:44:47.367 回答
0

仅使用 CSS 很容易。

看看这个小提琴：http: //jsfiddle.net/VgLVq/

要使 div 可点击，只需将其包装在<a>带有所需 URL 的标签中即可。

然后让他和他的.box每个position: relative孩子都进来position: absolute。我使用了选择器.box>*。

然后进入.caption并display:none添加这个 CSS 来检测悬停：

a:hover .caption{
    display:block;
}
于 2013-05-07T20:02:28.643 回答
0

我为你做了一个小提琴，它可以做你想做的事情。在不知道您打算使用哪些图像的唯一值来加载相关页面的情况下，我提供了一些示例代码：

工作小提琴在这里：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;
}
于 2013-05-07T20:11:26.593 回答