如何在图像地图上为asp热点着色？答案

【问题标题】：How to color asp hotspots on an imagemap?如何在图像地图上为asp热点着色？
【发布时间】：2012-07-17 22:37:19
【问题描述】：

我有一张图片（该图片是建筑物的平面图），该图片包含多个可以开放或预订的房间。我使用了 Imagemap 和热点来绘制房间的坐标，并且我正在处理 onclick 事件来完成我需要它们完成的事情。问题是，预订房间后如何为热点的坐标着色？我在我的数据库中跟踪保留的房间，所以知道哪个房间被保留不是问题，但问题是热点没有颜色属性。解决这个问题的最佳方法是什么？ Javascript？

我知道我可以在点击时交换图像等等，但是有数百个房间，对于预订/未预订房间的每种可能性都有这么多图像是浪费时间。

【问题讨论】：

标签： c# javascript asp.net imagemap

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

我认为这遇到了同样的问题，即必须访问我的数据库并在页面加载时更改房间颜色......有什么方法可以做到这一点？
当然有一种方法可以在服务器端进行，但可能需要使用 GDI+ 等进行大量工作才能实际绘制图像。它还要求最终用户每次访问该页面时都下载一个全新的图像，从它的声音来看，这可能是一个大图像。你用一个问题换另一个问题。如今，Javascript 的速度非常快，没有理由预期在客户端上执行此操作会出现性能问题。您不需要对数据库提出特殊请求，只需将页面加载时的数据作为 JSON 传递，并让客户端使用它进行渲染。
更新了我的答案，举例说明如何使用从服务器传递的数据。
我很抱歉，但你能解释一下我是如何从我的服务器获取数据的吗？我正在使用 SQL Server 2008。在页面加载时（在后面的代码中），我想从我的数据库中加载保留的房间并可能将它们存储在数据集中？然后循环遍历数据集并相应地在热点中着色。
我不知道您通常如何从您的服务器获取数据，但是无论代码呈现页面本身，您都会输出一些包含数据的 HTML。你看我贴的小提琴了吗？您所要做的就是让您的服务器生成一些与页面一起发送的内容。在我的示例中，该内容存储在 <script>..</script> 块中。如何做到这一点完全取决于您，如果您使用的是 ASP.NET 网络表单，那么只需添加一个 <asp:Literal> 控件并将其 Text 属性设置为 <script>[.. your data.. ]</script>。

【解决方案2】：

HTML5 通过canvas 进行程序绘图

【讨论】：

很好的答案，但是如果我需要从服务器端而不是客户端进行绘图，我不会有问题吗？我必须能够访问我的数据库，所以在页面加载时，为预订的房间着色。
哦，那么使用 gdi+ 就可以了。如果没有其他人在我之前得到它，将在早上发布一个示例