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

Question

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

我想做的是这样的:用户单击图像>灯箱显示更大的图像>更大的图像有一个带有指向另一个页面的链接的热点。

这可能吗？这看起来很简单，但我似乎无法让它发挥作用。这是引用代码。

<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

首先:map是一个单独的标签。所以你的代码永远不会工作。
这就是您通常使用 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>

话虽这么说，然后我想在包含全尺寸图像的 url 的链接上放置一个属性 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);

现在全尺寸图像具有正确的使用 map 集。
但它仍然不起作用!我认为这是因为 div 覆盖在该图像上。
这是fiddle我已经努力了。搜索 //xxx added 以找到我添加的 2 行。也许其他人可以做更多的工作。

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

A 还想指出，像 lightbox 这样的许多脚本也会调整全尺寸图像的大小以适合屏幕(据我所知，lightbox 不会这样做):那么您还需要 javascript 来重新计算我猜是 map 上的坐标。