Html map usage example tutorial

I will not introduce map, but directly talk about the problems encountered.

Question 1: If the original size of the image is 900px, but the size you display is 450px, then the map positioning is inaccurate. How to break it?

Question 2: If a page has multiple images that need to be mapped, what should be done?

1. Material picture:

1. This is a 900px material picture. We need to make the four small round icons in the lower right corner clickable.

## 2. HTML structure:

1. The corresponding coordinates of coords do not need to be changed, just change the proportion in 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(&#39;汽车图标&#39;);" alt=""/>7     </map>8 </div>

2. If there are multiple pictures, one picture corresponds to one map, and the class does not need to be changed. Just change the name value of the map and the corresponding usemap value. name=usemap They are a pair of CPs, don't separate them, give them the same value.

 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. Style sheet:

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

4. JS sets the proportion of the image: (Remember to quote jquery: )

 1 // 设置 图片热点区域 2 function set_map() { 3     var mapD = $('area'); //获取页面所有的热点区域 4     var imgW = $('.mapImg')[0].naturalWidth || 900; //图片原始尺寸 5     var imgW01 = $('.mapImg')[0].innerWidth || 450; //图片现在尺寸 6     var Multiple = imgW01 / imgW; //对应比例 7     var _arrS = ''; //存放coords的值 8     var _arr = []; //存放coords对应的值 9     for (var i = 0; i < mapD.length; i++) { //热点区域的个数10         _arr = [];11         _arrS = $(mapD[i]).attr('coords');12         _arr = _arrS.split(',');13         //coords值的个数，圆形为3个，方形为4个14         for (var j = 0; j < _arr.length; j++) { 
15             _arr[j] = _arr[j] * Multiple;16         }17         _arrS = _arr.join(',');18         // 把缩放比例后对应的coords，赋值给原有coords19         $(mapD[i]).attr('coords',_arrS); 
20     }21 }22 set_map();

5. Summary:

Careful children will find out why others add ID to pictures but I add class. The reason is to facilitate the use of map positioning for multiple zoomed pictures. Well...you will understand after reading it a few times!

The above is the detailed content of Html map usage example tutorial. For more information, please follow other related articles on the PHP Chinese website!