使用图像映射的替代方法是什么?我最近看到一个问题,有人说,“为什么人们还在使用图像地图?”我想知道一个好的CSS或JavaScript解决方案,看看它是否比图像映射更好用。
答案 0 :(得分:7)
CSS是处理图像映射的方法。通过更改左上角的宽度高度值,可以轻松地在图像的任何区域上定位具有所需宽度和高度的链接。
在示例中,将鼠标悬停在婴儿脸部或图像中的红灯上。要更改锚点的位置,您只需要修改#pos1和#pos2的顶部和左侧属性。边界框的宽度和高度也是如此。全部用CSS完成,没有javaScript。
答案 1 :(得分:2)
你只需要将ID放在锚点上,不需要div。
答案 2 :(得分:2)
答案 3 :(得分:1)
正如侯赛因的回答。我只是添加我的评论并与您分享使用图像地图的热情链接。
要获得更多信息,请访问以下链接全文
link 1
imagemapster
link 2
imagemapster-solutions
你可以将它谷歌作为图片地图绘制器了解更多信息。 谢谢
答案 4 :(得分:0)
这扩展了侯赛因的答案,并使其在响应式设计中扩展。您也可以使用转换different simple shapes from CSS。要查找大致位置(%),您可以从this page获得帮助。
这是一个例子:
html, div, p, a {
font-family: arial;
}
.map-image {
display: inline-block;
position: relative;
overflow: hidden;
padding: 0;
}
.map-image img {
width: 100%;
height: auto;
display:block;
}
.map-image a {
text-decoration: none;
padding: 5px;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 4vw;
}
.map-image a:hover {
border: 1px solid #FFF;
margin: -1px;
}
.map-image a.rotate {
border-radius: 50%;
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
transform: rotate(20deg);
}
.map-image a.rotate span {
position:absolute;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
top:25%;
}
.map-image a.skew {
border-radius: 15%;
-ms-transform: skewX(-20deg) rotate(9deg);
-webkit-transform: skewX(-20deg) rotate(9deg);
transform: skewX(-20deg) rotate(9deg);
}
.map-image a.skew span {
position:absolute;
-ms-transform: skewX(20deg) rotate(-9deg);
-webkit-transform: skewX(20deg) rotate(-9deg);
transform: skewX(20deg) rotate(-9deg);
top:12%;
left:4%;
}
.map-image svg {
position:absolute;
}
.map-image polygon:hover {
stroke: #FFF;
}
.map-image .poligon-title {
position:absolute;
left:19%;
top:43%;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 2.6vw;
z-index:100;
}
<div class="map-image">
<img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
<a href="https://www.google.com" title="Front window" style="position: absolute; left: 24.4%; top: 16.3%; width: 33.3%; height: 25.39%; z-index: 99; background-color:rgba(255,0,0,0.3);" class="skew"><span>Google</span></a>
<a href="https://www.facebook.com" title="Seats" style="position: absolute; left: 58%; top: 0.16%; width: 28.4%; height: 26.33%; z-index: 96; background-color:rgba(0,255,255,0.2);">Facebook</a>
<a href="https://www.linkedin.com/" title="Wheel" style="position: absolute; left: 43%; top: 57.4%; width: 20%; height: 39.34%; z-index: 99; background-color:rgba(0,255,0,0.2);" class="rotate"><span>Linkedin</span></a>
<svg height="auto" width="34%" style="position: absolute; left: 10%; top: 36%; z-index: 99;" viewBox="0 0 450 600">
<a id="anchor" xlink:href="https://stackoverflow.com" target="_top">
<polygon points="190,5 385,60 210,320 0,300 200,134 205,120 205,104" style="fill:rgba(0,0,0, 0.4);stroke-width:1" />
Sorry, your browser does not support inline SVG.
</a>
</svg>
<div class="poligon-title">Stackoverflow</div>
</div>
(与svg多边形的混合有点实验性)