Tutoriel d'exemple d'utilisation de carte HTML-tutoriel HTML-php.cn

Tutoriel d'exemple d'utilisation de carte HTML

零下一度

Libérer： 2017-07-17 16:53:13

original

2268 Les gens l'ont consulté

Je ne présenterai pas la carte, mais parlerai directement des problèmes rencontrés.

Question 1 : Si la taille originale de l'image est de 900 px, mais que la taille que vous affichez est de 450 px, alors le positionnement de la carte est inexact. Comment y remédier ?

Question 2 : Que dois-je faire s'il y a plusieurs images sur une page qui doivent être mappées ?

1. Image matérielle :

1. Il s'agit d'une image matérielle de 900px Nous devons rendre cliquables les 4 petites icônes rondes dans le coin inférieur droit.

2. Structure HTML :

1. Les coordonnées correspondantes des coordonnées n'ont pas besoin d'être modifiées, il suffit de changer la proportion en 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>

Copier après la connexion

2. S'il y a plusieurs images, une image correspond à une carte et la classe n'a pas besoin d'être modifiée. Il suffit de changer la valeur du nom de la carte et celle-ci. valeur usemap correspondante. name=usemap Ils forment une paire de CP, ne les séparez pas, donnez-leur la même valeur.

 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>

Copier après la connexion

3. Feuille de style :

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

4. JS définit le ratio de l'image : (N'oubliez pas de citer 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();

Copier après la connexion

5. Résumé :

Les enfants prudents découvriront pourquoi les autres ajoutent une pièce d'identité aux images, mais j'ajoute de la classe. La raison est de faciliter l'utilisation du positionnement sur la carte pour plusieurs images zoomées. Euh... lisez-le quelques fois et vous comprendrez !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!