根据图中的盲点坐标,弹出div层

<div class="map_r" id="mapinfo" style="position: absolute; top: 20px; left: 500px;
        display: block;">
        <div class="title_4">
            站点预报与实况值</div>
        <div class="list_map">
            <ul>
                <li>站点预报:<br />
                    <span id="liveclock">
                        <script language="javascript">
                            function displaytime() {
                                thisdate = new Date()
                                thismonth = thisdate.getMonth()
                                thismonth = thismonth + 1
                                thisday = thisdate.getDate()
                                thisyear = thisdate.getYear()
                                thisweek = thisdate.getDay(); switch (thisweek) {
                                    case 0: thisweek = "星期日"; break; case 1: thisweek = "星期一"; break; case 2: thisweek = "星期二"; break; case 3: thisweek = "星期三"; break; case 4: thisweek = "星期四"; break; case 5: thisweek = "星期五"; break; case 6: thisweek = "星期六"; break;
                                }
                                if (thisyear < 2000)
                                { thisyear = thisyear + 1900 }
                                document.getElementById("liveclock").innerHTML = thismonth + "" + thisday + "";
                            }
                            displaytime(); setInterval('displaytime()', 1000);            </script>

                    </span>&nbsp;阴有阵雨或<br />
                    雷雨转阴到 多云 24-29℃<br />
                </li>
                <li>
                    <p>
                        站点实况:</p>
                    <p>
                        <img src="../html/new_cmqx/images/pic_11.png" width="32" height="33" align="left" />2分钟平均风向:<span id="winddirection" runat="server"></span><br />
                        2分钟平均风速:<span id="windspeed" runat="server"></span></p>
                </li>
                <li>
                    <img src="../html/new_cmqx/images/pic_14.png" width="32" height="33" align="left" />
                    气温:<span id="Temperature" runat="server"></span><br />
                </li>
                <li>
                    <img src="../html/new_cmqx/images/pic_16.png" width="32" height="33" align="left" />小时雨量:<span id="Rain_sum" runat="server"></span></li>
            </ul>
        </div>
    </div>
    <img src="../html/new_cmqx/images/map_11.png" width="746" height="420" id="map" border="0"  usemap="#Map" />
    <map name="Map" id="Map">
        <area shape="rect" coords="98,32,114,48" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="41,48,59,66" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="26,83,46,103" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="213,148,232,167" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="248,159,267,178" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="185,165,205,185" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="157,180,175,198" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="191,197,211,217" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="371,192,393,214" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="408,251,427,270" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="363,272,384,293" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="291,319,312,340" onmousemove="showDetail(event)" onmouseout="hide();" />
        <area shape="rect" coords="395,374,417,396" onmousemove="showDetail(event)" onmouseout="hide();" />
    </map>
前台设计
.map{ margin-top:10px; position:relative; background:#77d4ff;}
.map_r{ 236px; height:384px; position:absolute; right:21px; top:14px; background:url(../images/bg_03.png)}
.title_4{ color:#439af3; text-align:center; line-height:30px; padding-top:35px; font-size:14px;}.list_map{ line-height:22px;}
.list_map li{ background:url(../images/list_03.png) no-repeat top; padding:7px 25px 5px; clear:both; }
.list_map li img{ margin-right:10px;}
CSS
原文地址:https://www.cnblogs.com/652769324qq/p/3169375.html