ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLマップの使用例チュートリアル
HTMLマップの使用例チュートリアル
- 零下一度オリジナル
- 2017-07-17 16:53:132266ブラウズ
地図を紹介するのではなく、直面した問題について直接話します。
質問 1: 画像の元のサイズが 900 ピクセルであるのに、表示されるサイズが 450 ピクセルの場合、マップの位置が不正確になります。それを解除するにはどうすればよいですか?
質問 2: マッピングする必要があるページ上に複数の画像がある場合はどうすればよいですか?
1. 素材画像:
1. これは、右下隅にある 4 つの小さな丸いアイコンをクリックできるようにする必要があります。
2. HTML構造:
1. 座標の対応する座標は変更する必要はなく、JSで比率を変更するだけでOKです。
1 <div class="map_img">2 <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">3 <map name="mapName">4 <!-- 方形区域写法 -->5 <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" alt=""/> -->6 <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('汽车图标');" alt=""/>7 </map>8 </div>
2. 複数のピクチャがある場合、1 つのピクチャは 1 つのマップに対応し、マップの名前の値と対応する usemap の値を変更するだけでクラスを変更する必要はありません。 name=usemap これらは CP のペアなので、分離せずに同じ値を与えます。
1 <div class="map_img"> 2 <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px"> 3 <map name="mapName"> 4 <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('汽车图标');" alt=""/> 5 </map> 6 <!-- 一张图片对应一个name和usemap --> 7 <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px"> 8 <map name="mapName2"> 9 <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('第二张图的汽车图标');" alt=""/>10 </map>11 </div>
3. スタイルシート:
! @#￥%……&*? (404)
4. JS は画像の比率を設定します: (jquery: