0

我正在尝试在图像上使用 FancyBox，分为 4 个图像映射。我找到了这篇文章：Using Fancybox with Image map，并复制了使用的资源和 js，但我的似乎不想运行...？请帮忙！

HTML：

<img src="http://www.acquafibrausa.com/images/caps_top.png" usemap="#Map">
    <map name="Map" id="Map">
       <area shape="rect" coords="43,91,177,141" href="http://www.acquafibrausa.com/images/nutrition_lime.png"
class="fancybox" alt="Click to view Lime nutrition facts" rel="image" />
       <area shape="rect" coords="264,92,399,142" href="http://www.acquafibrausa.com/images/nutrition_orange.png"
class="fancybox" alt="Click to view Orange nutrition facts" rel="image"
/>
       <area shape="rect" coords="488,92,622,143" href="http://www.acquafibrausa.com/images/nutrition_strawberry.png"
class="fancybox" alt="Click to view Strawberry nutrition facts" rel="image"
/>
       <area shape="rect" coords="711,90,846,142" href="http://www.acquafibrausa.com/images/nutrition_peach.png"
class="fancybox" alt="Click to view Peach nutrition facts" rel="image"
/>
    </map>

JQUERY/头部内容：

<link href="main_style.css" rel="stylesheet" type="text/css">
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
   $('map > area.fancybox').click(function(e) {
   e.preventDefault();
   var url = $(this).attr('href');
   var title = $(this).attr('title');
   var type = $(this).attr('rel');
   $.fancybox({
      'title': title,
      'titlePosition': 'inside',
      'href' : url,
      'type' : type
   });
});
</script>

看这里。

jsfiddle上有一个上面的例子。

4

3 回答 3

1

你还没有包括 jQuery。要在您的 Fiddle 中执行此操作，请查看页面右侧的。要在您的真实页面上执行此操作，最简单的方法是使用带有 CDN 的 jQuery。

它似乎只适用于 jQuery 1.8.3 及以下版本（我尝试了 jsFiddle 中可用的默认版本）。

而且你还没有关闭你的图片标签。

于 2013-01-28T17:59:53.923 回答
0

如果您只想从图像映射中打开 fancybox（也在这里回答https://stackoverflow.com/a/11418310/1055987），那么您只需要将area标签绑定到 fancybox，或者执行以下操作：

$("#Map area").fancybox();

...如果area标签没有任何类，或者：

$(".fancybox").fancybox();

...假设area标签有class="fancybox".

见JSFIDDLE ....

关于您的小提琴，您使用此链接链接到 jQuery：http: //ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.js但这会返回 404 错误。实际上，jQuery 的 v1.3.4 似乎从未存在过；) ...您可以查看http://code.jquery.com/以了解以前版本的 jQuery。

于 2013-01-28T20:18:36.280 回答
0

http://对我来说，使用完整 URL 路径（即以 开头）时不会加载脚本

尝试使用相对路径加载图像：href="images/image.jpg"

于 2013-07-20T18:19:31.690 回答