Html 使用图像映射生成器的一个好的替代方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8971815/
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
What is a good alternative to using an image map generator?
提问by leora
I have a large image and I want to make certain sections of the image clickable. I also want to specify the shape of the clickable area (square, circle, custom). Without relying on Javascript, how can I use CSS and HTML to create an interactive image-map? With hoverable "hot spots" and highlighting areas without relying on generating SVG coordinates. All of the online image map generators I found using Google, did not deliver what I perceive as a standard basic function of any imagemap tool.
我有一个大图像，我想让图像的某些部分可点击。我还想指定可点击区域的形状（正方形、圆形、自定义）。在不依赖 Javascript 的情况下，如何使用 CSS 和 HTML 来创建交互式图像地图？具有可悬停的“热点”和突出显示区域，而不依赖于生成 SVG 坐标。我使用 Google 找到的所有在线图像地图生成器都没有提供我认为是任何图像地图工具的标准基本功能。
采纳答案by mobius
Why don't you use a combination of HTML/CSS instead? Image maps are obsolete.
为什么不使用 HTML/CSS 的组合呢？图像映射已过时。
Check here: http://jsfiddle.net/jsWdj/for an example
在此处查看：http: //jsfiddle.net/jsWdj/示例
This btw is Search Engine Optimised as well :)
这个顺便说一句也是搜索引擎优化的:)
Source code follows:
源代码如下：
.image-map {
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 275px;
height: 95px;
display: block;
position: relative;
margin-top:10px;
float: left;
}
.image-map > a.map {
position: absolute;
display: block;
border: 1px solid green;
}
<div class="image-map">
<a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
<a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
<a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
<a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
<a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
<a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>
EDIT:
编辑：
After the numerous negative points this answer has received I have to come back and say that I can clearly see that you don't agree with my answer, but I personally still believe that is a better option than image maps.
在这个答案收到无数负面评论后，我不得不回来说，我可以清楚地看到您不同意我的答案，但我个人仍然认为这是比图像映射更好的选择。
Sure it cannot do polygons, it might have issues on manual page zoom, but personallyI feel image maps are obsoletealthough still on the html5 specification. (It makes make more sense nowadays to try and replicate them using html5 canvas instead)
当然它不能做多边形，它可能在手册页面缩放上有问题，但我个人觉得图像地图已经过时了，尽管仍然在 html5 规范上。（现在尝试使用 html5 画布复制它们更有意义）
However I guess the target audience for this question does not agree with me.
但是我想这个问题的目标受众不同意我的看法。
You could also check this Are HTML Image Maps still used?and see the most highly voted answer just for reference.
您还可以检查此是否仍在使用 HTML 图像映射？并查看投票最多的答案仅供参考。
回答by Chris Andersson
This one is in my opinion the best one for online (offline however dreamweaver is best): http://www.maschek.hu/imagemap/imgmap
这个在我看来是最好的在线（离线但 Dreamweaver 是最好的）：http: //www.maschek.hu/imagemap/imgmap
回答by user2429855
GIMP ( Graphic Image Manipulation Program) does a pretty good job... http://www.makeuseof.com/tag/create-image-map-gimp/
GIMP（图形图像处理程序）做得很好...... http://www.makeuseof.com/tag/create-image-map-gimp/
回答by mikul
you can use online tool like online Image Map
您可以使用在线工具，如在线图像地图
回答by Gfra54
This service is the best in online image map editing I found so far : http://www.image-maps.com/
这项服务是迄今为止我发现的最好的在线图像地图编辑服务：http: //www.image-maps.com/
... but it is in fact a bit weak and I personnaly don't use it anymore. I switched to GIMP and it is indeed pretty good.
...但实际上它有点弱，我个人不再使用它了。我切换到 GIMP，它确实很不错。
The answer from mobius is not wrong but in some cases you must use imagemaps even if it seems a bit old and rusty. For instance, in a newsletter, where you can't use HTML/CSS to do what you want.
mobius 的答案并没有错，但在某些情况下，您必须使用 imagemaps，即使它看起来有点旧和生锈。例如，在时事通讯中，您不能使用 HTML/CSS 来做您想做的事。
回答by pete otaqui
There is also Mappa - http://mappatool.com/.
还有 Mappa - http://mappatool.com/。
It only supports polygons, but they are definitely the hardest parts :)
它只支持多边形，但它们绝对是最难的部分:)
回答by alxbrd
I have found Adobe Dreamweaver to be quite good at that. However, it's not free.
我发现 Adobe Dreamweaver 在这方面做得很好。但是，它不是免费的。
