javascript - 使用 javascript 创建交互式地图

Question

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

我有几个领域，这只是一个例子。

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

有没有更好的方法？

Answer 1

图像映射器

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 库或其他依赖项。

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