怎么在HTML中加入热区,关于网页点击热区图

最简单的做法，是直接把鼠标点击的位置在图上标出来，比如像下图这样：

(图1)

上图的每一个小叉代表一次点击(为简单起见，这儿所有的小叉都是一种颜色，事实上，可以用不同的颜色来表示不同类型的点击，比如点在超链接上的小叉画成红色，点在非超链接上的小叉画成蓝色)，从图上可以大致看出来页面上哪几个区域的点击比较密集。但很多时侯，我们其实并不想精确地了解用户具体是点在哪个像素上，——很多时候，用户是点在这个像素上，还是点在右边相邻的像素上，并没有什么区别，我们想知道的，只是一个区域内的总的点击情况，或者说用户对这个页面上各个区域的兴趣情况。这个时候，热区图(或叫热力图)就可以派上用场了。

热区图的绘制不复杂，有多种不同的实现，下面介绍一下我的一些实践。

一、基本思路

色盘

热区图上最“冷”的部分到最“热”的部分应该是什么颜色？通常我们会预先定义好若干种颜色(比如100种、256种)，存放在一个数组中，最冷的部分取第一个颜色(索引为0)，次冷的取第二个颜色，直到最热的部分，取最后一个颜色。这个数组即是色盘。

热区图中比较常见的色盘是从蓝色(最冷)取到红色(最热)。网页中我们通常用 RGB 色彩，这儿也可以使用 RGB，