1

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

说我有这张图片

蓝色汽车

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

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

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

有没有人有任何建议？

4

5 回答 5

4

您可以为此使用图像映射

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/

于 2013-04-15T08:36:04.357 回答
0

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

于 2013-04-15T08:37:23.593 回答
0

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

于 2013-04-15T08:44:20.333 回答
0

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

于 2013-04-15T09:04:11.573 回答
-1

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

于 2013-04-15T08:39:47.577 回答