使悬停效果对图像的不同部分产生影响，而不是html而是img

Question

基本上我有一个建筑项目的“蓝图”，我需要这样做，以便当它们悬停在地板的特定部分时会弹出一个简短的描述。 像这样：

Answer 1

您可以使用区域地图。语法如下：

<map name="myMap">
  <area shape="rect" coords="0,0,10,20" href="somelink.html">
  <area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>

使用坐标定义每个区域。然后，您可以为每个区域分配一个ID并制作悬停项目。试一试，告诉我们。

您可以在线使用图像映射生成器，有很多。我使用这个：http://imagemap-generator.dariodomi.de/这比你自己做的容易得多。

Answer 2

尝试这个

＆＃13;

＆＃13;

<img src="map.jpg" width="100%" height="300px" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="50,50,10,10"  alt="building" title="building">
  <area shape="rect" coords="150,150,10,10"  alt="building + rooms" title="building + rooms">
</map>

＆＃13;

＆＃13;

＆＃13;

在图像中设置坐标，您将生成弹出消息

Answer 3

这也可以通过将此图像作为背景分配给相同大小的div来完成。然后将锚链接定位在您想要悬停效果的确切位置。添加悬停工具提示为given here，就是这样。一切都可以用纯粹的CSS来完成。