0

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

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

这可能吗？它看起来很简单，但我似乎无法让它工作。这是供参考的代码。

<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/ ，它允许您在框内添加许多额外元素，包括：Divs、iframe、html 等等！再次感谢大家。

4

2 回答 2

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>在您的灯箱中显示包含图像和链接的内容。

希望这可以帮助！

于 2012-08-22T01:14:01.917 回答
1

首先：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，该链接包含指向全尺寸图像的 url。像这样： 

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

现在全尺寸图像具有正确的 usemap 集。
但是还是不行！！我认为这是因为 div 覆盖在这张图片上。
这是我工作过的小提琴。搜索//xxx added以找到我添加的 2 行。也许其他人可以做更多的工作。

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

A 还想指出，像灯箱这样的很多脚本也会调整全尺寸图像的大小以适应屏幕（据我所知，灯箱不会这样做）：那么你还需要 javascript 来重新计算坐标我猜的地图。

于 2012-08-22T01:40:09.467 回答