我有一个图像。
当用户单击图像的特定区域时，我想将不同的 div 显示为弹出窗口。
我想用 jquery & html 来做。
谁能帮我这个。
问问题
2185 次
7 回答
3
这是示例解决方案的示例：http: //jsfiddle.net/htEvT/2/
JavaScript
$('#rabbit').click(function (e) {
var offset = $(this).offset(),
left = e.pageX - offset.left,
top = e.pageY - offset.top;
if (top > $(this).height() / 2) {
alertDiv('You\'ve cliked under the middle.', 'alert-white');
} else {
alertDiv('You\'ve cliked above the middle.', 'alert-gray');
}
});
function alertDiv(text, cssClass) {
var alrt = $('<div class="alert ' + cssClass + '">' + text + '</div>');
$(document.body).append(alrt);
alrt.click(function () {
alrt.remove();
});
}
CSS
.alert {
position: absolute;
left: 30px;
top: 30px;
width: 300px;
height: 200px;
border: 1px solid black;
}
.alert-white {
background: white;
}
.alert-gray {
background: #ccc;
}
HTML
<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="rabbit" alt="" />
如果我的解决方案有任何问题，请告诉我。:)
于 2012-11-01T08:27:30.390 回答
0
在图像上使用图像映射并在图像的不同部分附加精美的框。由于您尚未发布代码，因此我无法提供相同的编码解决方案。
于 2012-11-01T08:18:39.773 回答
0
像下面这样的东西应该给你一个如何做到这一点的想法：
$("img").click(function() {
$("body").append("<div class='newdiv'></div>")
})
.newdiv{width:100px; height:300px;border:1px solid red;}
于 2012-11-01T08:19:43.613 回答
0
我最喜欢的是Fancybox。
我还没有看到它做不到的事情。很棒的文档并且被广泛使用，所以如果你需要帮助，其他人很有可能会问同样的问题，并且可以通过简单的谷歌来解决。
于 2012-11-01T08:20:54.800 回答
0
在将显示缩略图的 HTML 页面上创建一个名为“imgbox”的 DIV。DIV 和与 DIV 关联的 CSS 元素 ID 如下所示
<div id="imgbox"></div>
的CSS
#imgbox
{
vertical-align : middle;
position : absolute;
border: 1px solid #999;
background : #FFFFFF;
filter: Alpha(Opacity=100);
visibility : hidden;
height : 200px;
width : 200px;
z-index : 50;
overflow : hidden;
text-align : center;
}
这是显示弹出图像的 JavaScript 代码： 获取缩略图图像的左侧和顶部位置：
function getElementLeft(elm)
{
var x = 0;
//set x to elm’s offsetLeft
x = elm.offsetLeft;
//set elm to its offsetParent
elm = elm.offsetParent;
//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm != null)
{
x = parseInt(x) + parseInt(elm.offsetLeft);
elm = elm.offsetParent;
}
return x;
}
function getElementTop(elm)
{
var y = 0;
//set x to elm’s offsetLeft
y = elm.offsetTop;
//set elm to its offsetParent
elm = elm.offsetParent;
//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm != null)
{
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return y;
}
获取缩略图图像源，使DIV可见，将高度和宽度增加到所需大小，并将图像附加到DIV。
function Large(obj)
{ var imgbox=document.getElementById("imgbox"); imgbox.style.visibility='可见'; var img = document.createElement("img"); img.src=obj.src; img.style.width='200px'; img.style.height='200px';
if(img.addEventListener){
img.addEventListener('mouseout',Out,false);
} else {
img.attachEvent('onmouseout',Out);
}
imgbox.innerHTML='';
imgbox.appendChild(img);
imgbox.style.left=(getElementLeft(obj)-50) +'px';
imgbox.style.top=(getElementTop(obj)-50) + 'px';
}
Hide the DIV at mouse out.
function Out()
{
document.getElementById("imgbox").style.visibility='hidden';
}
为缩略图添加 OnMouseOver 客户端事件调用，以在鼠标悬停时显示弹出图像。
<img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />
于 2012-11-01T08:21:07.180 回答
0
如果该区域是正方形的，您可以在所需区域上放置一个透明元素，并给它一个简单的onClick事件。
于 2012-11-01T08:22:08.277 回答
-1
使用简单模态
您可以使用插件SimpleModal来实现您想做的事情。
SimpleModal是一个轻量级的 jQuery 插件，它为模态对话框的开发提供了一个强大的接口。将其视为模态对话框框架。SimpleModal 让您可以灵活地构建您可以设想的任何内容，同时使您免受 UI 开发固有的相关跨浏览器问题的影响。
使用它，您可以调用已经存在div的模式或动态创建模式。
调用现有的div：
$("#element-id").modal();
即时制作模态：
$.modal("<div><h1>SimpleModal</h1></div>");
给予选项：
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
演示：
更多演示在这里：http ://www.ericmmartin.com/projects/simplemodal-demos/
于 2012-11-01T08:17:59.543 回答