将图像图标放在图像映射上,并使用javascript使其可点击

时间:2014-10-28 18:27:48

标签: javascript jquery html5 javascript-events

我是JavaScript的新手。我们有平面图。我们需要在办公室平面图上放置一个座位图像并使其可点击。 我们需要显示某些信息,如座位号,空置或被占用,人员姓名,如果它被占用等,鼠标悬停在事件上或点击时。使用图像地图功能但无法在图像地图上放置图标。 请帮我解决这个问题。

<img id="feature" src="trignometry-page-001.jpg" border="0" width="1754" height="1240"  orgWidth="1754" orgHeight="1240" usemap="#image-maps-2014-10-19-105116" alt="" />
<map name="feature">
<area  alt="" title="" shape="rect" class="group" coords="228,560,250,585"  target="_self" onClick="alert('hi')" data-maphilight="{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}"    />
<area shape="rect" coords="1752,1238,1754,1240" alt="Image Map" style="background-color: transparent;border: 1px solid yellow;" title="Image Map"  />
</map>

1 个答案:

答案 0 :(得分:0)

也许一些javascript事件会帮助您了解更多如何工作。 http://javascript.info/tutorial/mouse-events

你可以检查这个画布样本的多个区域,这是使用Jquery。

https://github.com/neshte/jquery-canvas-area-draw

最好使用您正在使用的代码。

希望这有帮助。