Question

我有一张图片（图片是建筑物的平面图），图片包含可以打开或保留的各种房间。我使用了Imagemap和热点来绘制房间的坐标，我正在处理onclick事件以完成我需要它们完成的任务。问题是，一旦保留房间，我怎样才能为热点的坐标着色？我跟踪我的数据库中的预留房间，因此知道保留哪个房间不是问题，但问题是热点没有颜色属性。最好的方法是什么？的Javascript？

我知道我可以在点击和诸如此类的东西上交换图像，但是有数百个房间，对于预留/非预留房间的每种可能性而言，拥有那么多图像将是浪费时间。

Answer 1

你不是说jQuery但它肯定比从头开始更容易。 jQuery插件执行此操作：

http://www.outsharked.com/imagemapster/

您的数据库访问问题有点像红鲱鱼。没有理由在加载页面时服务器无法传递作为标记一部分所需的数据，例如

<script type="application/json" id="map-data">
  [1,2,10,33]
</script>

..或任何格式/结构/数据类型对您有用。您不必使用script块 - 您可以将其置于隐藏的div中，这无关紧要。你也不必使用JSON，这很方便。然后，您可以将该数据用作ImageMapster之类的输入，以突出显示所需的区域。只需隐藏图像，直到您完成配置，并且就最终用户所见，这就是从服务器加载的方式。

从标记中获取一些数据并使用它在Imagemap上使用ImageMapster设置热点的示例：

http://jsfiddle.net/jamietre/hD6bM/

Answer 2

HTML5通过canvas

进行程序化绘制

如何在imagemap上为asp热点着色？

2 个答案: