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

Question

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

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

是否有任何工具可以简化此操作？

Answer 1

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

好的 <map>，如评论中所述，将是一个。将多个图像放在彼此之上将是另一个图像。

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

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

我推荐阅读 SVG 介绍，例如：

如果您想使用 JPEG 图像（而不是走 SVG 路线），您仍然可以使用 SVG 来创建 "hover-zones"。它看起来像这样：

<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

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

Add Hover affect to specific parts of an image

javascript

jpeg

hover