javascript - 图像的可选区域

Question

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

假设我有这张图片

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

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

我知道这可以用 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');
});

fiddle - http://jsfiddle.net/fxZsd/