如何在使用图像映射创建的特定区域中添加图钉

时间:2019-05-28 07:03:02

标签: html css angular tags imagemap

我有一个角度应用程序,其中使用HTML usemap创建了图像地图

代码:

structure(list(to_be_discretized = c(0.0152096300012854, 0.0132660373578711, 
0.014699121782711, 0.0157102877064037, 0.0197417484744586, 0.019651999420645
), TARGET = c(27136, 30048, 34840, 138812, 191088, 240370)), class = c("spec_tbl_df", 
"tbl_df", "tbl", "data.frame"), row.names = c(NA, -6L))

我想在该图像的特定区域上添加一个图钉,当我将其悬停在它上面时,应该会出现工具提示。怎么做?目前,我的svg图标位于图片下方。
svg供参考-http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg

1 个答案:

答案 0 :(得分:0)

.box {
    top : 260px ;
    left : 210px;
    width:8%;
    height:8%;
    background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

添加顶部和左侧位置已解决了该问题