图例 是个展会的预订图,
比如 1638 我在后台上了 预订改展位的企业,我想把这个图作为背景,如果1638有企业了,那么 1638区域上做个标记,说明已经被预订,并且 鼠标移动上去,可以显示 预订的情况。不想用div来慢慢堆,,太多了。

解决方案 »

  1.   

    忘记老驴面积了
    {
     "1638",[x,y,w,h], //展厅标号:[坐标x,坐标y,宽,高]
     "1638",[100,200,300,500]
     ......
    }
      

  2.   

    楼主 ,程序不是肉眼看 , 知道哪块区域是哪块,需要想办法,让程序知道图片的区域这里 想到一个方法,用map, 手动画一下 热点, 程序根据热点来判断,这样省去了人肉计算坐标
    具体看<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    .a {
    position:absolute;
    background:#eee;
    opacity:.4; filter:alpha(opacity=40);
    color:red; font-weight:bold;
    cursor:pointer; text-align:center;
    }
    </style>
    </head>
    <body>
    <pre>
    coords x1 y1 x2 y2
    x1 是 left
    y1 是 top
    x2 - x1 是 width
    y2 - y1 是 height
    </pre>

    <div id="test" style="position:relative;">
    <img src="http://img.my.csdn.net/uploads/201206/08/1339142640_5754.jpg" border="0" usemap="#Map" />
    </div>
    <map name="Map" id="map1">
    <area shape="rect" coords="21,21,80,73" data-id="1638">
    <area shape="rect" coords="79,23,158,72" data-id="1633">
    </map>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="1.asp"></script>
    <script>
    //alert(json['1638'])
    $('#map1 area').each(function(){
    var t = json[$(this).attr('data-id')];
    if( t && t != 'none' ){
    var tmp = this.coords.split(',');
    $('<div class="a">已定</div>').css({
    left: tmp[0] + 'px',
    top: tmp[1] + 'px',
    width: tmp[2] - tmp[0] + 'px',
    height: tmp[3] - tmp[1] + 'px',
    lineHeight: tmp[3] - tmp[1] + 'px'
    }).attr('title', t).appendTo('#test')
    }
    })
    </script>
    </body>
    </html>
    1.asp 就返回数据库的操作,打印一个js的变量,让js去操作。<%
    response.write "var json = {1638: 'none', 1633: '中国传媒大学'}"
    %>这样 鼠标 移动到 1633 就可以显示了。