使用图像映射生成器有什么好的选择？ [英] What is a good alternative to using an image map generator?

问题描述

我有一张大图片，我想让图片的某些部分可点击。我也想指定可点击区域的形状（正方形，圆形，自定义）。不依赖于Javascript，我怎样才能使用CSS和HTML来创建交互式图像映射？具有可靠的热点，并突出显示不依赖于生成SVG坐标的区域。我使用Google发现的所有在线图像映射生成器都没有提供我认为是任何图像映射工具的标准基本功能。 解决方案

为什么不使用HTML / CSS的组合呢？图片地图已过时。

请点击这里： http：// jsfiddle.net/jsWdj/ 为例

这个btw也是搜索引擎优化的：

源代码如下：

  .image-map {
 background：url（'http：// www .google.com /国际/ en_com /图像/ SRPR / logo3w.png'）; 
 width：275px; 
 height：95px; 
 display：block; 
职位：亲属; 
 margin-top：10px; 
 float：left; 
} 
 
 .image-map> a.map {
 position：absolute; 
 display：block; 
 border：1px纯绿色; 
} 
 
< div class =image-map> 
< a class =map =Gstyle =top：0px; left：0px; width：70px; height：95px; HREF = ＃ >< / A> 
< a class =map =ostyle =top：0px; left：70px; width：50px; height：95pxhref =＃>< / a> 
< a class =map =ostyle =top：0px; left：120px; width：50px; height：95pxhref =＃>< / a> 
< a class =map =gstyle =top：0px; left：170px; width：40px; height：95pxhref =＃>< / a> 
< a class =map =lstyle =top：0px; left：210px; width：20px; height：95pxhref =＃>< / a> 
< a class =map =estyle =top：0px; left：230px; width：40px; height：95pxhref =＃>< / a> 
< / div> 
  

编辑：

在收到这个答案的许多负面消息后，我必须回过头来说，我可以清楚地看到你不同意我的回答，但我个人仍然认为这是比图像地图更好的选择。 p>

确定它不能执行多边形，它可能在手动页面缩放时遇到问题，但个人我觉得图像映射已过时虽然仍然在html5规范上。 （现在使用html5画布可以更有意义地尝试和复制它们）

然而，我猜这个问题的目标受众并不同意我的看法。

>

您也可以查看这个 HTML图像仍然使用地图？，并查看最受好评的答案，以供参考。

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.

解决方案

Why don't you use a combination of HTML/CSS instead? Image maps are obsolete.

Check here: http://jsfiddle.net/jsWdj/ for an example

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 personally I feel image maps are obsolete although still on the html5 specification. (It makes make more sense nowadays to try and replicate them using html5 canvas instead)

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.

这篇关于使用图像映射生成器有什么好的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！