图像的可选区域

Question

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

说我有这个图像

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

我希望它改为灰色我选择的区域，所以我们知道我选择了那个区域。

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

有人有任何建议吗？

Answer 1

您可以使用图像映射

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/

Answer 2

您可以使用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

Answer 3

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

Answer 4

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

更改颜色的问题

Answer 5

使用html map标签并为地图指定一个id，并为地图的点击事件编写jquery代码并执行任务