怎么实现调用一张图片，点击图片的不同位置，可实现如下两个功能

<!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=gb2312" />
<title>无标题文档</title>
<script>
function hide(){
document.getElementById("img1").style.display = "none";
}
function to(){
window.location.href = "http://www.iwode.com";
}
</script>
</head><body>    
<img src="1.gif" width="500" height="400" border="0" usemap="#Map" id="img1" />
<map name="Map" id="Map">
  <area shape="rect" coords="5,1,196,397" href="#" onclick="hide()" />
  <area shape="rect" coords="281,-14,496,395" href="#" onclick="to()" />
</map>
点击左边隐藏，点击右边转到另一页面
</body>
</html>

解决方案 »

  1.   

    LZ的要求有点怪是JS加载图片后实现你的功能吗？
    这样看行不行
    <script type="text/javascript">
       function test1(){
          alert("点击图片的左侧");
       }   function test2(){
          alert("点击图片的右侧");
       }
    </script>
    <div id="img" style="width:100px;height:100px;background-image:url(test.gif);">
       <div id="left" style="width:50px;height:100px;float:left" onclick="test1()"></div>
       <div id="right" style="width:50px;height:100px;float:left" onclick="test2()"></></div>
    </div>