求个解决方案,该怎么处理

求个解决方案

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

不想用div来慢慢堆，，太多了。

------解决方案--------------------
楼主，程序不是肉眼看，知道哪块区域是哪块，需要想办法，让程序知道图片的区域

这里想到一个方法，用map，手动画一下热点，程序根据热点来判断，这样省去了人肉计算坐标
具体看

HTML code


<!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.****.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>

求个解决方案,该怎么处理

相关推荐