Javascript 使用IMG地图显示较大的图像

我使用的是一张有很多小图片的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>

---

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

我想你想要的是下面这把小提琴。编写的代码非常粗糙，可以进行优化。检查一下你想要这个还是别的什么

---

演示：

这里有一种方法可以使用：

要使用内置的工具提示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" />

以下是每个选项的含义：

1）

toolTipContainer

应包含用于显示工具提示的模板的HTML。在小提琴中，您将看到我添加了一个ID为“tooltip container”的隐藏div

2）

mapKey

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

3）

区域

是区域特定格式信息的数组。通常，您可以使用它来控制如何显示每个区域上的突出显示效果。在你的例子中，我只是用它来激活所有区域的工具提示。键

all

匹配每个区域，因为它们都有第二个键，并且

toolTip:true

启用工具提示。通常你会说

toolTip:“一些特定于此区域的文本：”

，而这些文本只会显示在默认的工具提示容器中。在您的例子中，我们想要显示一个图像，我想要从区域本身获取图像URL，所以当显示工具提示时，我需要在函数中处理它

4）

showToolTip

表示为整个地图启用工具提示

5）

onShowToolTip

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

---

这应该更简单——但是imagemapster中的工具提示API实际上是围绕一个非常简单的模型设计的，在这个模型中，每个区域都有一些硬编码的文本。这是一个从每个区域的href抓取URL的解决方法。

可能重复建议获取工具提示插件，在google中很容易找到。将图像url存储在数据属性的每个区域中，并将其传递给plugin@charlietfl-我曾尝试使用qTip 2，但有一个问题，请参阅：qTip可以做很多事情，但工具提示也有一些更简单的API，它们不太难通过大量选项和配置设置。感谢帮助。它似乎可以工作，但有一些小故障。如果你没有正确定位鼠标，它会忽闪忽灭。是的！我知道正如前面所说的代码是粗略编写的。你可以根据你的需要来设计它。

$('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+'">');
        }
    }});​