zoukankan      html  css  js  c++  java
  • 根据图中的盲点坐标,弹出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
  • 相关阅读:
    layout(布局)组件
    accordion(分类)组件
    progressBar(进度条)组件
    LinkButton(按钮)组件
    tooltip(提示框)组件
    jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决
    Echarts 图例交互事件
    JSON 语法
    jQueryMobile (一) :教程
    纯CSS3按钮变换效果
  • 原文地址:https://www.cnblogs.com/652769324qq/p/3169375.html
Copyright © 2011-2022 走看看