请教一个关于图片热区的问题

Question

我想做个这样的效果：
像淘宝上那样，鼠标放到宝贝的图片上，出来一个大一点的图片。
我是一整张大图片，然后分许多热区，鼠标移动到不同的热区出现不同的图片。
用javascript能实现吗？

Answer 1

可以使用
<map>和<area>

Answer 2

看我用的代码，怎么把文字变成图片。
  <div   style=position:absolute;display:none   id=mdiv></div>   
  <script   language="JScript">   
  function   go(t,e){   
  mdiv.style.display="";   
  mdiv.innerHTML=t;   
  function   e.onmousemove(){   
  mdiv.style.pixelLeft=(document.body.clientWidth-event.clientX-10)>mdiv.offsetWidth?(event.clientX+10):(event.clientX-mdiv.offsetWidth);   
  mdiv.style.pixelTop=(document.body.clientHeight-event.clientY-10)>mdiv.offsetHeight?(event.clientY+10):(event.clientY-mdiv.offsetHeight);   
  }   
  function   e.onmouseout(){   
  mdiv.style.display="none";   
  }   
  }   
  </script>
  </table>
<map name="Map">
  <area shape="circle" coords="53,336,14" href="hhgs-73.asp" target="_blank" onmouseover="go('长城轴承已发布',this)">
  <area shape="circle" coords="446,333,14" href="#" onmouseover="go('大明不锈钢',this)">
  <area shape="circle" coords="864,208,14" href="#" onmouseover="go('招商中',this)">
</map>

Answer 3

我现在能实现文字注释，但是又碰到一个新问题。<area shape="circle" coords="864,208,14" href="#" onmouseover="go('招商中',this)">
“招商中三个字是竖排的”<area shape="circle" coords="864,208,14" href="#" onmouseover="go('sdfsddg',this)">
"sdfsddg"是横排的这是什么原因？