高手帮忙修改一下代码，有关图片拖动缩放热区的

以下是源码，想实现的功能是在原有的基础上，点击画好的热区后进入新的链接。最好再能实现响应MouseScroll事件缩放！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>3D</title>
<style type="text/css">
.picview { width:100%; margin:auto auto auto auto; text-align:center;  background:#FFFFFF; height:700px; overflow:hidden; }
.picview img{width:800px; cursor: move; margin:15px; z-index:1; border:8px }
#contral{ position: absolute;z-index:10; left:15px; top:80px;}
#contral img{ width:auto; margin:auto; cursor:auto; width:20px; border:0px;}
#contral ul{width: 88px;}
#contral li{width:26px; height:26px; float:left; list-style:none;}
</style></head><body>
<div id="picview" class="picview">
  <div id="contral">
    <ul>
      <li></li>
      <li><img src="http://wecanqiang.h206.000pc.net/up.gif" onClick="clickMove('up')" title="UP"></li>
      <li></li>
      <li><img src="http://wecanqiang.h206.000pc.net/left.gif" onClick="clickMove('left')" title="LEFT"></li>
      <li><img src="http://wecanqiang.h206.000pc.net/zoom.gif" onClick="realsize();" title="FULL SIZE"></li>
      <li><img src="http://wecanqiang.h206.000pc.net/right.gif" onClick="clickMove('right')" title="RIGHT"></li>      <li></li>
      <li><img src="http://wecanqiang.h206.000pc.net/down.gif" onClick="clickMove('down')" title="DOWN"></li>
      <li></li>
      <li></li>
      <li><img src="http://wecanqiang.h206.000pc.net/zoom_in.gif" onClick="bigit();" title="ZOOM IN"></li>
      <li></li>
      <li></li>
      <li><img src="http://wecanqiang.h206.000pc.net/zoom_out.gif" onClick="smallit();" title="ZOOM OUT"></li>
      <li></li>    </ul>
  </div>
  <img src="http://wecanqiang.h206.000pc.net/Sunset.jpg"  name="viewArea" id="viewArea" />
<map name="map" id="map">
  <area shape="poly" coords="100,100,100,100" href="http://www.baidu.com" />
  </div>
<!--div id="mouseData"></div-->
</body>
</html><script language="javascript">
var rate = 0.2;
var pp = document.getElementById("viewArea");
var vv = document.getElementById("picview");var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var st,sl;function moveMouse(e) {
 if (isdrag) {
 var mouseX = nn6 ? e.clientX : event.clientX;
 var mouseY = nn6 ? e.clientY : event.clientY;
 
 vv.scrollTop = st+(y-mouseY);
 vv.scrollLeft = sl+(x-mouseX);
 //document.getElementById('mouseData').innerHTML = "x="+x+" y="+y+" x-mouseX="+(x-mouseX)+" y-mouseY="+(y-mouseY);
 return false;
 }
}function initDrag(e) {
 var oDragHandle = nn6 ? e.target : event.srcElement;
 isdrag = true;
 x = nn6 ? e.clientX : event.clientX;
 y = nn6 ? e.clientY : event.clientY;
 
 st = vv.scrollTop;
 sl = vv.scrollLeft; document.onmousemove = moveMouse;
 return false;
}
pp.onmousedown=initDrag;
pp.onmouseup=new Function("isdrag=false");function bigit(){
  pp.style.height = pp.height*(1+rate)+"px";
  pp.style.width = pp.width*(1+rate)+"px";
}
function smallit(){
  pp.style.height = pp.height*(1-rate)+"px";
  pp.style.width = pp.width*(1-rate)+"px";
}function realsize(){
  var newImg = new Image();
  newImg.src = pp.src;
  pp.style.height = newImg.height+"px";
  pp.style.width = newImg.width+"px";
}function clickMove(s){
 if(s=="up"){
  vv.scrollTop = vv.scrollTop-100;
 }else if(s=="down"){
  vv.scrollTop = vv.scrollTop+100;
 }else if(s=="left"){
  vv.scrollLeft = vv.scrollLeft-100;
 }else if(s=="right"){
  vv.scrollLeft = vv.scrollLeft+100;
 }
}function changeImage(path){
  pp.src = path;
  pp.style.width = "1000px";
  vv.scrollTop = 0;
  vv.scrollLeft = 0;
}</script>