Javascript 在lightbox中的图像上添加热点链接
我已经被这个问题绊倒了一段时间，经过几周的研究，我觉得在这里寻求帮助是安全的 我想做的是：用户点击一个图像>灯箱显示较大的图像>较大的图像有一个指向另一个页面链接的热点 这可能吗？这似乎很简单，但我似乎无法让它工作。这是代码供参考Javascript 在lightbox中的图像上添加热点链接,javascript,jquery,lightbox,Javascript,Jquery,Lightbox,我已经被这个问题绊倒了一段时间，经过几周的研究，我觉得在这里寻求帮助是安全的 我想做的是：用户点击一个图像>灯箱显示较大的图像>较大的图像有一个指向另一个页面链接的热点 这可能吗？这似乎很简单，但我似乎无法让它工作。这是代码供参考 <a href="images/createaccount_img.jpg" rel="lightbox" usemap="#Map" map name="Map" id="Map"><area shape="rect" coords="323,20
<a href="images/createaccount_img.jpg" rel="lightbox" usemap="#Map" map name="Map" id="Map"><area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" /><area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" > <img src="images/panel_login_11.jpg" width="152" height="27" alt="" />
允许您在框中添加许多额外的元素，包括：div、iframe、html等等！再次感谢大家。这里有一个简单的HTML页面，上面有一张企鹅的照片，企鹅头上有一个hotpsot，链接到www.google.com
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="hotspot_image" style=""><img alt="Image with Hot Spot that links to www.google.com" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pygoscelis_papua.jpg/250px-Pygoscelis_papua.jpg" />
<a href="https://www.google.com" style="position:absolute; width: 60px; height: 60px; left:100px; top: 40px; z-index:1; " ></a></div>
</body>
</html>
现在，您只需在lightbox中显示包含图像和链接的
希望这有帮助 首先：map是一个单独的标记。因此，您的代码永远不会工作。
这是您通常使用地图的方式：
<a href="images/createaccount_img.jpg" rel="lightbox">
<img src="images/panel_login_11.jpg" width="152" height="27" alt="" usemap="#map" />
</a>
<map name="map" id="map">
<area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" />
<area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" >
</map>
然后我修改了lightbox.js
来读取该属性usemap:$link.attr（'data-usemap'）
，并设置该属性$image.attr（'usemap'，u this.album[imageNumber].usemap）
现在，全尺寸图像具有正确的usemap设置。
但是它仍然不起作用！！我想这是因为这张图片上覆盖了div
这是我一直在做的工作。搜索//xxx added
以查找我添加的2行。也许其他人可以再做一些
换句话说，我认为在未修改的lightbox.js上创建mod并不容易
A还需要注意的是，很多脚本（如lightbox）也会调整全尺寸图像的大小以适应屏幕（据我所知，lightbox不会这样做）：然后，我想你还需要javascript来重新计算地图中的坐标。我真的很感谢你花这么多时间来做！非常感谢你。它似乎离工作很近了。。。我会试着再玩一会儿。如果有人能解决问题，它仍然没有显示热点让我知道！非常感谢，没问题。然而，我很好奇你是如何让nz_karl的答案起作用的（你接受了），因为你的问题很清楚：“灯箱内是否可能有一个热点，如果有，怎么做”。那你是怎么让那个女主角出现在灯箱里的？我已经花了两个小时回答你的问题，至少告诉我和未来的读者你是如何得到nz_karl在lightbox工作的答案的。张贴一些代码或小提琴。否则，这个问题对未来的读者来说是无用的。非常感谢。我通过使用Lightbox 1和Lightbox 2得到了它的工作原理。Lightbox 1和Lightbox 2除了图像之外，没有任何设置。Fancybox允许许多额外的元素，包括：div、iframe、html等等。不过我非常感谢你的帮助。我学到了很多关于代码顺序的知识。再次感谢你，祝你一切顺利！谢谢你的回复，工作解决方案和接受！回头见！
<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-1.jpg" rel="lightbox" data-usemap="#map"><img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-1.jpg" alt=""></a>