div如何在图片上定位?

<html> 
   <body> 
     <div style="width:80%">         <!--中国地图的div块--> 
        <img width="100%" boder="0" src="chinamap.gif" usemap="#Map"> 
        <div style="POSITION: absolute;">
     <div style="LEFT: -294px; POSITION: absolute; TOP: 239px; height:*; font-size:16px;font-weight:bold; color:red">   
        <span id="aa"> abc </span> 
     </div>
     </div> 
            <MAP NAME="Map"> 
               <AREA SHAPE="rect" COORDS="66,212,227,320" HREF="xinjiang.bmp" alt="新疆维尔自治区"> 
            </MAP> 
     </div> 
         <!--对应新疆维尔自治区的数据显示div块-->
     
   </body> 
</html> 用多一个div 设置 POSITION: absolute; 你就拉到哪里..浏览器对应的就是那里..

解决方案 »

  1.   

    <div style="width:80%">         <!--中国地图的div块-->
            <img width="100%" boder="0" src="chinamap.gif" usemap="#Map">
                <MAP NAME="Map">
                   <AREA SHAPE="rect" COORDS="66,212,227,320" HREF="xinjiang.bmp" alt="新疆维尔自治区">
                </MAP>
         </div> 这样width:80%，在窗口缩放的时候，地图发生变形，这种效果好吗？我个人不赞成。
    地图发生变形，<map>的<area>的坐标也要通过js来发生改变，热点才会正确。
      

  2.   

    <AREA SHAPE="rect" COORDS="66,212,227,320" HREF="xinjiang.bmp" alt="新疆维尔自治区">    
    这不就是一个方的热点？
      

  3.   

    你说的那意思是做成固定的宽度么？也就是说把 <div style="width:80%">         <!--中国地图的div块--> 
    改成<div style="width:800px">吗？
    如果是这样的话那可能不行，我想要的是当窗口变小时，中国地图跟着变小也就是窗口内必须显示全部图片的。。
      

  4.   

    <div style="width: 80%"><!--中国地图的div块--> <img id="cn" width="100%" src="img/china_map.jpg" usemap="#map" /> <map
        id="map">
        <area id="xinjiang" shape="rect" coords="176,181,337,289" href="xinjiang.bmp" alt="新疆维尔自治区" />
    </map> <!--对应新疆维尔自治区的数据显示div块-->
    <div id="xj"
        style="background: blue; left: 186px; position: absolute; top: 197px; font-size: 16px; font-weight: bold; color: red; width: 160px; height: 106px;">
    <span id="aa"> abc </span></div>
    </div>// source map width
    var MAP_WIDTH = 1024;window.onload = function() {
    MAP_WIDTH = document.getElementById("cn").width;
    }window.onresize = function() {
    var map = document.getElementById("cn");
    var xj = document.getElementById("xinjiang");

    var rec = xj.coords.split(",");
    var scale = map.width * 1.0 / MAP_WIDTH;
    MAP_WIDTH = map.width;alert(scale);
    for(var i = 0; i < rec.length; i++) {
    rec[i] *= scale;
    }
    xj.coords = rec.join(',');

    var hint = document.getElementById("xj"); hint.style.left = parseInt(rec[0]) + "px";
    hint.style.top = parseInt(rec[1]) + "px";
    hint.style.width = parseInt(rec[2] - rec[0]) + "px";
    hint.style.height = parseInt(rec[3] - rec[1]) + "px";

    };初步实现，自己加以改进
      

  5.   

    哥们你给的这个不太行啊当多改变几次窗口大小时div的位置偏的不行了。谢谢啊。。
      

  6.   

    星辰技术社区:www.netcsharp.cn,我们将帮您以最快的速度找到最佳的解决方案