Javascript jQuery 图像映射替代
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5190543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery image map alternative
提问by Kieran Andrews
What is an alternative to using image maps? I saw a question recently and someone said, "Why are people still using image maps?" and I wanted to know a good CSS or JavaScript solution to see for myself if its better to use than an image map.
使用图像映射的替代方法是什么？最近看到一个问题，有人说，“为什么人们还在使用图像地图？” 我想知道一个好的 CSS 或 JavaScript 解决方案，以便我自己看看它是否比图像映射更好用。
采纳答案by Hussein
CSS is the way to go when working with image maps. You can easily position a link with desired width and height over any area of the image by changing top left width height values.
CSS 是处理图像映射时要走的路。通过更改左上角的宽度高度值，您可以轻松地将具有所需宽度和高度的链接放置在图像的任何区域上。
Check a working example at http://jsfiddle.net/DBvAY/1/
在http://jsfiddle.net/DBvAY/1/检查一个工作示例
In the example, Hover over the babies face or the red light in the image. To change the position of the anchors all you need to do is modify the top and left properties of #pos1 and #pos2. Same goes for width and height of the bounding box. All done with CSS with no javaScript.
在示例中，将鼠标悬停在婴儿的脸或图像中的红灯上。要更改锚点的位置，您只需修改 #pos1 和 #pos2 的 top 和 left 属性。边界框的宽度和高度也是如此。全部使用 CSS 完成，没有 JavaScript。
回答by user102030
you only need to put the ID's on the anchors, the divs are not required.
您只需要将 ID 放在锚点上，不需要 div。
回答by bmunslow
If your website is responsive, you might want to try using SVG as an excellent alternative to image maps.
如果您的网站是响应式的，您可能想尝试使用 SVG 作为图像地图的绝佳替代品。
SVGs can easily be made responsive and also respond to hover effects, etc.
SVG 可以轻松响应并响应悬停效果等。
This is a nice articlethat discusses the matter.
这是一篇很好的文章，讨论了这个问题。
回答by Muhammad Ali Bala
As the Hussein answer. I'm just adding my remarks and share with you some links in the fever of use image map.
正如侯赛因的回答。我只是添加我的评论，并与您分享使用热图图中的一些链接。
- you cannot only position the image like square but also like rectangle and even polygon.
- you can add your desire output in a popup screen by hover the position/ and even you can perform action as well.
- 您不仅可以像方形一样定位图像，还可以像矩形甚至多边形一样定位图像。
- 您可以通过悬停位置 / 在弹出屏幕中添加您想要的输出，甚至您也可以执行操作。
to get more please visit these below linkshelp full
要获得更多信息，请访问以下链接帮助完整
link 1imagemapster
link 1图像映射器
link 2imagemapster-solutions
link 2imagemapster-解决方案
you can google it as image mapster for more. thanks
你可以谷歌它作为图像映射器了解更多。谢谢
回答by eye-wonder
This is extending Hussein's answer and make it scale in a responsive design. Also you can make different simple shapes from CSSwith transform. To find the approximate position (%) you can get help from this page.
这是扩展侯赛因的答案，并使其在响应式设计中扩展。您也可以使用转换从 CSS 中制作不同的简单形状。要查找大致位置 (%)，您可以从此页面获得帮助。
Here is a example:
下面是一个例子：
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>(The mixing with svg polygon is a little bit experimental)
（与 svg 多边形的混合有点实验性）
