图像的可选区域答案

【问题标题】：Selectable area of an image图像的可选区域
【发布时间】：2013-04-07 07:23:42
【问题描述】：

我不确定我应该在这方面寻找什么，所以如果我问一个重复的问题，请立即提出建议，我会删除。

说我有这张图片

我想让它的部分可选，所以当我选择屋顶时，如果我选择右侧、左侧、后部等，它会在此刻有一个警报或 console.log 说 ROOF 相同

我希望它把我选择的区域变成灰色，这样我们就知道我选择了那个区域。

我知道这可以用 javascript/jquery 完成，但我不确定如何。

有人有什么建议吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用 html 地图标签来使用坐标系统声明这些部分，并使用 javascript/jquery 来创建警报/弹出窗口/工具提示等。

来自 w3schools 的示例：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

有关它的更多信息，请查看http://www.w3schools.com/tags/tag_map.asp

【讨论】：

【解决方案2】：

使用 html 地图标签并为地图提供 id 并为地图的点击事件编写 jquery 代码并完成您的任务

【讨论】：

【解决方案3】：

您可以为此使用图像映射

HTML

<img src="http://i.stack.imgur.com/7o2sJ.jpg?1366014978754" alt="" usemap="#map1">
<map id="map1" name="map1">
    <area shape="rect" alt="" title="" coords="69,25,243,128" href="#" target="" />
    <area shape="rect" alt="" title="" coords="81,255,248,426" href="#" target="" />
</map>

JS

$('#map1 area:eq(0)').click(function () {
    alert('hood');
});

$('#map1 area:eq(1)').click(function () {
    alert('roof');
});

小提琴 - http://jsfiddle.net/fxZsd/

【讨论】：

我读过一些关于 90 年代的图像地图的文章，现在已经不再适用了，所以我没有深入研究它
它们在 HTML5 规范中，所以它们不会被弃用，stackoverflow.com/questions/5249502/…
没关系，我很满意。
太棒了，喜欢这个链接。 +1。

【解决方案4】：

是的，这是可能的。但不确定您是否会喜欢这种方法。以 SVG 格式设计您的汽车或任何图像。 SVG 支持鼠标事件。将事件绑定到这些区域并单击更改颜色。这是关于使用 javascript 更改颜色的问题 Changing SVG image color with javascript

【讨论】：

【解决方案5】：

您可以在画布对象 (html5) 上绘制图像，所有这些部分都可以矢量绘制

【讨论】：