HTML 맵 사용 예제 튜토리얼
- 零下一度원래의
- 2017-07-17 16:53:132294검색
지도를 소개하지는 않고, 발생한 문제점에 대해 직접 이야기하겠습니다.
질문 1: 이미지의 원래 크기가 900px인데 표시하는 크기가 450px인 경우 지도 위치가 정확하지 않은 것입니다. 어떻게 깨나요?
질문 2: 한 페이지에 매핑해야 할 이미지가 여러 개 있는 경우 어떻게 해야 하나요?
1. 소재 사진:
1. 900px 소재 사진입니다. 오른쪽 하단에 있는 4개의 작은 원형 아이콘을 클릭할 수 있도록 만들어야 합니다.
2. HTML 구조:
1. 해당 좌표의 좌표는 변경할 필요가 없습니다. JS에서 비율만 변경하면 괜찮습니다!
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. 사진이 여러 장일 경우 하나의 사진이 하나의 맵에 해당하므로 클래스를 변경할 필요는 없습니다. 맵의 이름 값과 해당하는 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를 인용하는 것을 기억하세요: