使用 IMG 地图显示更大的图像

Posted

技术标签:

【中文标题】使用 IMG 地图显示更大的图像【英文标题】:Using an IMG Map to display larger images 【发布时间】:2012-06-23 08:25:39 【问题描述】:

我正在使用包含许多小图片的 IMG 地图。当我将鼠标悬停在每个图像上时,它将显示一个更大的图像。我该怎么做呢?我不介意使用 javascript、css 等,只要它有效。请举个例子。

IMG 地图的 HTML

<img src="img.jpg" 
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
 <area class="1" shape="rect" coords="4,3,225,150" />
 <area class="2" shape="rect" coords="2,152,221,303" />
 <area class="3" shape="rect" coords="3,303,221,452"  />
</map>

每个类都有不同的图像以显示更大。

【问题讨论】:

***.com/questions/745110/…的可能重复 建议获取一个工具提示插件,在 google 中很容易找到。将每个区域的图片 url 存储在一个数据属性中,将其传递给插件 @charlietfl - 我尝试使用 qTip 2 但有问题,请参阅:***.com/questions/11131941/qtip-2-and-images qtip 可以做很多事情,但也有更简单的 API 用于工具提示,并且不那么难通过无数选项和配置设置 【参考方案1】:

这是使用ImageMapster 的一种方法:

http://jsfiddle.net/zSBL5/

要使用其内置的工具提示 API,您需要做几件事。首先为每个区域添加一个属性,如下所示:

<area data-key="2,all"  shape="rect" coords="0,90,82,170" 
    href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />

注意data-key。这是 ImageMapster 的“mapKey”。对于您的情况,我们需要它的唯一原因是创建一个名为“all”的区域组,可用于为每个区域显示相同的工具提示。每个区域都有这样的属性,但编号不同,例如data-key="3,all"data-key="4,all" 等等。

然后是绑定imagemapster的代码:

$('img').mapster(
    toolTipContainer: $('#tooltip-container'),
    mapKey: 'data-key',
    areas: [ 
        key: 'all',
        toolTip: true
    ],
    showToolTip: true,
    onShowToolTip: function(data) 
        if (this.href && this.href!='#') 
            data.toolTip.html('<img src="'+this.href+'">');
        
    );​

每个选项的含义如下:

1) toolTipContainer 应包含用于显示工具提示的模板的 HTML。在小提琴中,你会看到我添加了一个 ID 为“tooltip-container”的隐藏 div

2) mapKey 是您添加到每个区域的属性的名称。此属性可以包含一个或多个逗号分隔值。 Imagemapster 将共享第一个值的突出显示区域组合在一起,因此如果您不需要对任何区域进行分组,请使用不同的区域。每个区域的第二个值应该相同,我用它来激活所有区域的工具提示。

3) areas 是一个区域特定格式信息的数组。通常您使用它来控制如何显示每个区域的突出显示效果。在您的情况下,我只是使用它来激活所有区域的工具提示。键 all 匹配每个区域,因为它们都将其作为第二个键,并且 toolTip: true 启用工具提示。通常你会说toolTip: "some text specific to this area:" 并且该文本只会显示在你的默认工具提示容器中。在您的情况下,我们想要显示图像,并且我想从区域本身获取图像 URL,因此我需要在显示工具提示时在函数中处理它。

4) showToolTip 表示为整个地图启用工具提示。

5) onShowToolTip 定义了一个在显示工具提示时调用的函数。从这里您可以截取它并更改内容以显示该区域的图像。

这应该更简单 - 但 imagemapster 中的工具提示 API 确实是围绕一个非常简单的模型设计的,其中每个区域只有一些硬编码文本。这是从每个区域的 href 中获取 URL 的解决方法。

【讨论】:

【参考方案2】:

我想你想要下面给出的小提琴。编写的代码非常粗糙并且可以优化。只需检查你想要这个或其他东西。

演示: http://jsfiddle.net/3GF6s/3/

【讨论】:

感谢您的帮助。它似乎工作,但有一些小故障。如果您没有正确放置鼠标,它会闪烁。 是的!我知道所说的代码是大致写的。您可以根据需要对其进行样式设置。

以上是关于使用 IMG 地图显示更大的图像的主要内容,如果未能解决你的问题,请参考以下文章

响应图像 srcset 忽略 div 宽度以在 Firefox 中显示比所需更大的图像

osmdroid - 显示更大的图块

Python 在图像中的单词之间产生更大的间隙

在图像鼠标悬停时在父 div 中显示大的可点击图像

为啥缩放以填充比 UIImageVIew 尺寸更大的图像? (使用快速)

在新的、更大的图像中居中图像资源 (PHP/imagecopy)