Question

我已经偶然发现了一段时间，经过几周的研究后，我觉得在这里寻求帮助是安全的。

我要做的是：用户点击图片＆gt;灯箱显示较大的图像＆gt;较大的图像有一个热点，其中包含指向另一个页面的链接。

这可能吗？这似乎很简单，但我似乎无法让它发挥作用。以下是供参考的代码。

<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="" />

解决方案：最好的选择是使用http://fancybox.net/，它允许您在框中添加许多额外元素，包括：Div，iframe，html等等！再次感谢大家。

Answer 1

这是一个简单的HTML页面，其中有一只企鹅的图片，企鹅头上有一个热门链接，链接到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>

现在您只需要在灯箱中制作包含图片和链接的<div>。

希望这有帮助！

Answer 2

首先：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>

话虽如此，我接着想要在包含全尺寸图片网址的链接上放置一个属性data-usemap。像这样：

<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>

然后我修改了lightbox.js以阅读此属性usemap: $link.attr('data-usemap')并设置该属性$image.attr('usemap', _this.album[imageNumber].usemap);

现在，全尺寸图片具有正确的使用地图集 但它仍然没有工作!!我认为这是因为div叠加在这张图片上这是我所研究的fiddle。搜索//xxx added以查找我添加的2行。也许其他人可以再努力了。

换句话说，我认为在未经修改的lightbox.js上创建一个mod并不容易。

A还要注意很多像lightbox这样的脚本也会调整全尺寸图像的大小以适应屏幕（灯箱根据我的意见不会这样做）：那么你还需要javascript来重新计算我猜测地图中的坐标。

在灯箱中的图像上添加热点链接

2 个答案: