Question

如何使用CSS（如google地图地址图钉）指向图像中的某些位置，并在悬停时显示一些文字（如工具提示）我需要自定义工具提示，甚至可以保存图像？

有人可以帮帮我吗？提前谢谢。

Answer 1

使用地图定义div上透明图像上的区域，并为每个热点设置标题：

参见jsBin demo here

HTML：

  <div class="divWithImageAsBackground">
  <img class="invisibleImage" usemap="#test">
  <map name="test">
  <area shape="rect" coords="0,0,100,30" href="#" title="This is the first hotspot">
  <area shape="rect" coords="100,0,200,30" href="#" title="This is the second hotspot">
  <area shape="rect" coords="200,0,300,30" href="#" title="This is the third hotspot">
</map>
  </div>

CSS：

.invisibleImage {
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
  height:32px; 
  width:280px;
}

.divWithImageAsBackground {
  background-image: url(http://www.w3schools.com/images/w3logotest2.png); 
  height:32px; 
  width:280px;"
}

Answer 2

说你的背景图片在div上：

#myImage( background-image: url(someimage.jpg) );

为该div添加'position：relative'样式。

然后，在div中添加一些元素，使用'position：absolute'定位到你想要的位置。每个人都应该有一个唯一的ID，然后您可以参考该ID为每个ID提供弹出窗口。

HTML

<div id='myImage'>
    <a id='hotSpot1'></a>
    <a id='hotSpot2'></a>
    <a id='hotSpot3'></a>
</div>

CSS

#myImage{ background-image: url(someimage.jpg); position: relative; }
#myImage a{ position: absolute; }
#hotSpot1{ top: 100px; left: 150px; }
... etc ...

使用CSS在图像中指向区域并在悬停时显示一些文本？

2 个答案: