将悬停效果添加到图像的特定部分

Question

如果这是错误的主板，请提前抱歉。如果有人可以将我重定向到正确的网站？

大家好，我正在尝试添加悬停效果，使用 THIS 突出显示每个建筑物 图片。有多个建筑物，所以我需要拆分它们。有没有办法在每个建筑物上设置边界，并知道我在哪个建筑物上空盘旋？例如，如果我在建筑物上方盘旋到底部，它将显示与该建筑物相关的信息。

是否有任何工具可以使这更容易做到？

Answer 1

有多种方法可以做到这一点：

如评论中所述，好的'<map>将是一个。将多个图像彼此定位将是另一个。

查看图片我推荐的方法将是create an SVG。图像看起来像是来自3D工具。最有可能的是，您可以将图像导出为SVG并在网页上显示该SVG。这样做的好处是：

• 图像尺寸会很小。最可能比基于像素的相应图片小（jpeg / png / etc）。
• 图像将在不损失质量的情况下进行缩放。
• 在这种情况下最重要的是：您可以轻松地将每个建筑物作为自己的元素，这意味着您可以让它对悬停，点击等做出反应。

我建议阅读SVG简介，例如：

• http://tonyfreed.com/blog/introduction-to-svg
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction

如果您想使用JPEG图像（而不是使用SVG路线），您仍然可以使用SVG来创建“悬停区域”。它看起来像这样：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet" >
    <image width="800" height="500" xlink:href="yourImage.jpg" />
    <polygon id="building1" points="200,10 250,190 160,210" width="800" height="500" />
</svg>

然后你可以让你的JS代码做出反应，悬停在#building1上。这是一个关于这种技术的教程：http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG