我正在使用包含许多小图片的 IMG map 。当我将鼠标悬停在每个图像上时,它会显示一个更大的图像。我该怎么做呢?我不介意使用 javascript、css 等,只要它能工作。请举个例子。
IMG map 的 HTML
<img src="img.jpg" alt="Main Photo - Please View With Images On"
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>
每个类(class)都会有不同的图像以显示更大。
最佳答案
这是使用 ImageMapster 实现的方法:
要使用其内置的工具提示 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”。我们需要它来满足您的情况的唯一原因是创建一个名为“全部”的区域组,可用于为每个区域显示相同的工具提示。每个区域都有这样的属性,但编号不同,例如data-key="3,all"
、data-key="4,all"
等。
下面是绑定(bind)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。在 fiddle 中,您会看到我添加了一个 ID 为“tooltip-container”的隐藏 div
2) mapKey
是您添加到每个区域的属性的名称。该属性可以包含一个或多个逗号分隔值。 Imagemapster 将共享第一个值的突出显示区域组合在一起,因此如果您不需要对任何区域进行分组,请使用不同的区域。每个区域的第二个值应该相同,我用它来激活所有区域的工具提示。
3) areas
是区域特定格式信息的数组。通常您使用它来控制如何显示每个区域的突出显示效果。在你的情况下,我只是用它来激活所有区域的工具提示。键 all
匹配每个区域,因为它们都将它作为第二个键,并且 toolTip: true
启用工具提示。通常您会说 toolTip: "some text specific to this area:"
并且该文本只会显示在您的默认工具提示容器中。在您的情况下,我们想要显示一张图片,我想从该区域本身获取图片 URL,因此我需要在显示工具提示时在一个函数中处理它。
4) showToolTip
表示为整个 map 启用工具提示。
5) onShowToolTip
定义了一个在工具提示显示时调用的函数。从这里您可以拦截它并更改内容以显示该区域的图像。
这应该更简单 - 但 imagemapster 中的工具提示 API 实际上是围绕一个非常简单的模型设计的,您只需为每个区域提供一些硬编码文本。这是从每个区域的 href 中获取 URL 的解决方法。
关于javascript - 使用 IMG map 显示更大的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11132457/