ホットゾーン地図エリアの使用

 

地図のラベル

ホットスポットだけUSEMAP imgタグには属性があり使用imgタグを満たすために必要なマップ。

USEMAP、マップのIDを指定して地図区域内の複数のラベルを指定し、地域の必要性は形状や座標、ジャンプのURLを指定することが、あなたはまた、onclickの指定れるonmousemoveや他のイベントことができます。

< IMG SRC = "planets.jpg" ボーダー= "0" USEMAP = "＃1 planetmap" ALT = "惑星"  /> 

< マップ名= "planetmap" ID = "planetmap" > 
  < エリア形状= "円" COORDS =」 180,139,14" HREF = "venus.html" ALT = "ビーナス"  /> 
  < 地域形状= "RECT" COORDS = "0,0,110,260" HREF = "sun.html" ALT = "太陽" /> 
</ マップ>

デモ

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>首页</ タイトル> 
    < スクリプトタイプ= "アプリケーション/ javascriptの" SRC =」../ JS / jQueryの-3.4.1.min.js」> </ スクリプト> 
    < スタイルタイプ= "テキスト/ cssの" > 
        * { 
            マージン：0 0 ;
        } 
    </ スタイル> 

    < スクリプトタイプ= "ファイルアプリケーション/ JavaScriptを" > 
        // 背景画像変更
        機能chgImgを（）{ 
            $（" #indexImg " ）の.css（' 背景画像' 、「URL（」../ IMG / 1_2.jpg '）" ）; 
        } 
        // スイッチ背景画像
        機能normalImg（）{ 
            $（" #indexImg " ）の.css（' 背景画像' 、" URL（' ../ IMG / 1_1.jpg「）"）;
        } 
        // 浏览器打开指定URL 
        関数のOpenURL（）{ 
            window.open（" ./agencyIndex.html " ）。
        } 
    </ スクリプト> 
</ ヘッド> 

< ボディスタイル= "オーバーフロー-X：隠された" > 

    < IMG スタイル= "幅：1920px;高さ：1420px; 
     位置：絶対;左：50％;上部：0％; 
     margin-左：-960px;マージントップ：0PX; 
     背景画像：のURL（ '../ IMG / 1_1.jpg'）; 
     背景リピート：なしリピート; 
     背景位置：センター;」USEMAP =」= "indexImg"/> 

    < マップ名= "planetmap" ID = "planetmap" > 
        < 領域の形状= "RECT" COORDS = "1050,131,1130,154" れるonmousemove = "chgImg（）" ALT = "机构1"  /> 
        < エリア形状= "RECT" COORDS = "1020,120,1220,415" のonclick = "OpenURLの（）" れるonmouseout = "normalImg（）" ALT = "机构2"  /> 
        < 地域の形状= "RECT" COORDS = "770675、 1184年、968" のhref = "newsdetail.html" ALT= "详情" >
    </ マップ> 
</ ボディ> 
</ HTML >