使用javascript创建交互式地图

Question

所以我有以下示例图像......我认为这个图像会在没有绿色色调的情况下开始。当用户将鼠标悬停在该区域上时，它将变为绿色并成为链接。

我有几个方面，这只是一个例子。

我以为我可以将图像分成几个切片并将它们与div对齐以形成图片， 然后在每个切片上使用鼠标将其更改为绿色。

有更好的方法吗？

Answer 1

ImageMapster

ImageMapster是一个jQuery插件，可让您在不使用Flash的情况下激活HTML图像映射。它适用于Javascript所做的任何地方，包括现代浏览器，Internet Explorer 6以及iPad，iPhone和Android等移动设备。

Answer 2

如果您有一张照片的多个部分发生变化，那么您的想法就在正确的轨道上。

您可以轻松使用css，而不是使用javascript。按照您的描述创建div并正确排列它们。而不是实际将图像放在标记中，将链接放在标记中并使用css使图像成为链接的背景，并将链接显示设置为阻止，以便整个div变为可点击。

对于单件的html来说会是这样的：

<div id="slice1" class="slice"><a href="#"></a></div>

和css类似：

.slice a
{
    display: block;
}
#slice1
{
    width: 100px;
    height: 100px; /* set your actual width/heights */
    background-image: url(path_to_your_image);
    background-position: center top;
}
#slice1:hover
{
    background-position: center bottom;
}

使用此示例，您的背景图像文件将是2个图像，首次加载时的图像，然后是直接位于下方的悬停图像。当您更改悬停时的背景位置时，您将显示下面的图像。这也消除了在第一次悬停时更改背景图像和获得白色闪光的恼人版本。

这不需要任何javascript编码，外部JavaScript库或其他依赖项。

这写得非常快，所以你可能需要做一些调整，但这会让你开始。