document.getElementById("myCanvas").onclick = function circle(event) {
x = event.clientX
y = event.clientY
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
context.clearRect(0,0 ,500,400)
context.fillStyle = "#f00"
context.beginPath()
context.arc(x,y,10,0, Math.PI*2)
context.closePath()
context.fill()
}
图片热点区域中，rect 矩形区域，使用2个做点来确定具体位置和大小。
shape="rect"coords="x1,y1,x2,y2"
以图片的左上角为坐标原点，矩形的左上角坐标x1,y1和矩形的右下角坐标x2,y2来确定具体位置和大小。
结合具体的代码来解释
coords="0,0,110,260"0,0就是矩形的左上角坐标
该点距离图片的左上角横向距离为0
该点距离图片的左上角纵向距离为0
110,260就是矩形的右下角坐标
该点距离图片的左上角横向距离为110
该点距离图片的左上角纵向距离为260
图示
如何实现大致就是通过获得或失去焦点来触发相关事件，这个事件就是弹出一个相应的层，这个层通过CSS来控制样式。这种效果网上有很多脚本提供的。
你可以去百度搜索，JS导航栏，JQ导航栏类似这种关键字。
找到适合你自己的效果，直接把脚本复制过来慢慢研究吧。
