[英]Overlaying multiple external pages or divs with multiple links
我有一组带有标题的图像(来自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>
请在注释中回答您的第二个问题:“我什至无法获得一个简单的链接来弹出弹出窗口。我对JQuery还是很陌生,所以我应该如何链接到JQuery,应该在哪里放置脚本以及如何实现您正在处理的img和attr内容?”,这是一个截图,显示了您所需的一切。
仅使用CSS很容易。
看看这个小提琴吧: http : //jsfiddle.net/VgLVq/
要使div可点击,只需将其包装在具有所需URL的<a>
标记中。
然后将.box
在position: relative
并将每个孩子放置在position: absolute
。 我使用了选择器.box>*
。
然后将.caption
为display:none
并添加以下CSS来检测鼠标悬停:
a:hover .caption{
display:block;
}
我为您制作了一个小提琴,它可以做您想做的事情。 在不知道您打算用于加载相关页面的图像的哪些唯一值的情况下,我提供了一些示例代码:
工作小提琴在这里:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.