javascript - 为图像的特定部分添加悬停效果

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

如果这是发帖的错误版 block ，请提前抱歉。如果是的话，有人可以将我重定向到正确的网站吗？

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

是否有任何工具可以使这一切变得更简单？

Answer 1

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

好人 <map> 正如评论中所说，将是其中之一。将多个图像彼此重叠放置将是另一回事。

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

• 图像尺寸会很小。最有可能小于基于像素的相应图片(jpeg/png/等)。
• 图像将在不损失质量的情况下进行缩放。
• 在这种情况下最重要的是:您可以轻松地让每个建筑物都有自己的元素，这意味着您可以让它对悬停、点击等使用react。

我建议阅读 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 代码使用react，将鼠标悬停在 #building1 上。这是有关此技术的教程:http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG