HTML 맵 사용 예제 튜토리얼-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 맵 사용 예제 튜토리얼

零下一度

Jul 17, 2017 pm 04:53 PM

html 만나다 질문

지도를 소개하지는 않고, 발생한 문제점에 대해 직접 이야기하겠습니다.

질문 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(&#39;汽车图标&#39;);" 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(&#39;汽车图标&#39;);" 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(&#39;第二张图的汽车图标&#39;);" alt=""/>10     </map>11 </div>

로그인 후 복사

3. 스타일 시트:

! @#엔%……&*? (404)

4. JS는 이미지의 비율을 설정합니다. (jquery를 인용하는 것을 기억하세요: