国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

JavaScript 圖像映射

2018-09-28 18:04 更新

圖像映射

您可以使用 JavaScript 來創(chuàng)建客戶端的圖像映射。 usemap 啟用客戶端圖像映射的屬性定義的 <img /> 標(biāo)記和特殊的 <map> 和 <area> 擴(kuò)展標(biāo)簽。

一般情況下，用 <map> 將形成映射的圖像插入到頁面，此外它帶有一個(gè)額外的屬性稱為 usemap 。usemap 屬性的值是<map> element 上的 name 屬性的值。

<map> 元素實(shí)際上創(chuàng)建的地圖圖片，通常遵循后直接 <img /> 元素。它為<area /> element充當(dāng)一個(gè)容器，<area /> element 用于定義可點(diǎn)擊的熱點(diǎn)。<map> element只有一個(gè)屬性，即名稱屬性，用于標(biāo)識映射。這就是為什么 <img /> 元素知道使用哪個(gè) <map> element。

<area> 元素指定坐標(biāo)定義邊界的形狀和每一個(gè)可點(diǎn)擊的熱點(diǎn)。

當(dāng)鼠標(biāo)移動(dòng)到圖像的不同部分時(shí)，以下結(jié)合 imagemap 和 JavaScript 在一個(gè)文本框里面產(chǎn)生一個(gè)消息。

    <html>
    <head>
    <title>Using JavaScript Image Map</title>
    <script type="text/javascript">
    <!--
    function showTutorial(name){
      document.myform.stage.value = name
    }
    //-->
    </script>
    </head>
    <body>
    <form name="myform">
       <input type="text" name="stage" size="20" />
    </form>
    <!-- Create  Mappings -->
    <img src="/attachments/image/wk/wkjavascript/usemap.gif" alt="HTML Map" 
    border="0" usemap="#tutorials"/>
    <map name="tutorials">
       <area shape="poly" 
    coords="74,0,113,29,98,72,52,72,38,27"
    href="/perl/index.htm" alt="Perl Tutorial"
    target="_self" 
    onMouseOver="showTutorial('perl')" 
    onMouseOut="showTutorial('')"/>
       <area shape="rect" 
    coords="22,83,126,125"
    href="/html/index.htm" alt="HTML Tutorial" 
    target="_self" 
    onMouseOver="showTutorial('html')" 
    onMouseOut="showTutorial('')"/>
       <area shape="circle" 
    coords="73,168,32"
    href="/php/index.htm" alt="PHP Tutorial"
        target="_self" 
    onMouseOver="showTutorial('php')" 
    onMouseOut="showTutorial('')"/>
    </map>
    </body>
    </html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號