javascript图像映射

问题描述：我是想当鼠标滑过图像上的苹果时，在页面上的id=“txt”<P>标签上显示“这是苹果”，可是结果却是当鼠标滑过图像上得苹果后，整幅图像却消失了，“我是苹果”这些字没有显示在id=“txt”的<P>标签上。同样，梨子和葡萄也是一样的问题。html代码如下：
<!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>
    <title>无标题页</title>
    <script type="text/javascript">
    function write(txt)
    {
   document.getElementById('xie').innerHTML=txt; 
    
    
    }
    
    
    </script>
    <style type="text/css">
    .dd{
    height:40px;
    width:200px;
    background-color:yellow;
    }
    
    </style>
</head>
<body>
<img src="tu/shuiguo.jpg" usemap="#id" height="400px" width="400px" border="0" />
<map id="id" name="id">
<area coords="13,235,80,320" shape="rect" onmousemove="write('这是橙子')"  /><area shape="rect"  coords="300,145,375,230" onmousemove="write('这是苹果')" />
<area shape="rect"   coords="200,150,260,260" onmousemove="write('这是葡萄')"   /></map>
<br />:
<br /><div id="xie" class="dd"></div>
</body>
</html>
希望有人能解决问题！