0

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

IMG 地图的 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>

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

4

2 回答 2

2

这是使用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定义一个在显示工具提示时调用的函数。从这里您可以截取它并更改内容以显示该区域的图像。

This should be simpler - but the tooltip API in imagemapster is really designed around a very simple model where you just have some hardcoded text for each area. This is a workaround to grab the URL from the the href of each area.

于 2012-06-21T11:23:31.420 回答
0

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

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

于 2012-06-21T06:39:04.263 回答