javascript當(dāng)中Map Area Shape 和onmousemove的用法

例 4.2(MapAreaShapeMouseMoveIEFF.html)
馬克- to-win:馬克 java社區(qū):防盜版實(shí)名手機(jī)尾號(hào): 73203。


<html>
<head>
<title> img hidefocus="true"必須加,否則ie8中點(diǎn)擊map后,會(huì)粗線(xiàn)一個(gè)contour, 輪廓線(xiàn)</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
    function showTip(event,txt)
    {
        var newDiv = document.getElementById('newDiv');
        newDiv.style.display="block";
        //clientX是鼠標(biāo)指針位置相對(duì)于窗口客戶(hù)區(qū)域的 x 坐標(biāo)
        newDiv.style.left=event.clientX+10; //必須加上10,如果不加10的話(huà),老會(huì)閃爍
        newDiv.style.top=event.clientY+5;
        newDiv.style.position="absolute"; //必須指定這個(gè)屬性,否則newDiv層無(wú)法跟著鼠標(biāo)動(dòng)
        newDiv.innerHTML="<table class='my'><tr><td>" + txt + "</td></tr></table>";;
    }
    function closeTip()
    {
        var newDiv = document.getElementById('newDiv');
        newDiv.style.display="none";
    }
</script>

<style type="text/css">
    <!--
    .my {
        font-size: 13px;
        color: #000000;
        background-color: #99CC99;
        padding: 3px;
    }
    -->
</style>
</head>
<body>
<div id="newDiv" style="display: none; z-index: 1;">
</div>
<img hidefocus="true"
        src="markWeChat.jpg"
        border="0" usemap="#qixyplanetmap"
        />

<map name="qixyplanetmap" id="planetmap">

    <area
            shape="circle"
            coords="200,50,50"
            href ="us.html"
            target ="_blank"
            alt="us" onmousemove="showTip(event,'想加微信 <br /> 必須得掃一下<br /> 否則是<br />加不上的<br />知道了嗎')"
 onmouseout="closeTip()" onmousedown="" />

    <area
            shape="rect"
            coords="0,0,100,100"
            href ="rect.html"
            target ="_blank"
            alt="rect" onmousemove="showTip(event,'想加微信 <br /> 必須得掃一下<br /> 否則是<br />加不上的<br />知道了嗎')"
 onmouseout="closeTip()" onmousedown=""  />

</map>

< p><b>馬克-to-win:注釋?zhuān)?lt;/b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據(jù)瀏覽器),所以我們同時(shí)向 map 元素添加了 "id" 和 "name" 屬性。</p>
a.矩形:必須使用四個(gè)數(shù)字,前兩個(gè)數(shù)字為左上角座標(biāo),后兩個(gè)數(shù)字為右下角座標(biāo)




b.圓形:必須使用三個(gè)數(shù)字,前兩個(gè)數(shù)字為圓心的座標(biāo),最后一個(gè)數(shù)字為半徑長(zhǎng)度



c.任意圖形(多邊形):將圖形之每一轉(zhuǎn)折點(diǎn)座標(biāo)依序填入

例:<area shape=poly coords=442,40,485,40,340,94 href="URL">
</body>
</html>