Beispiel-Tutorial zur Verwendung einer HTML-Karte-HTML-Tutorial-php.cn

Beispiel-Tutorial zur Verwendung einer HTML-Karte

零下一度

Freigeben： 2017-07-17 16:53:13

Original

2267 Leute haben es durchsucht

Ich werde die Karte nicht vorstellen, sondern direkt auf die aufgetretenen Probleme eingehen.

Frage 1: Wenn die Originalgröße des Bildes 900 Pixel beträgt, die angezeigte Größe jedoch 450 Pixel beträgt, ist die Kartenpositionierung ungenau.

Frage 2: Was soll ich tun, wenn auf einer Seite mehrere Bilder vorhanden sind, die zugeordnet werden müssen?

1. Materialbild:

1. Dies ist ein 900-Pixel-Materialbild. Wir müssen die 4 kleinen runden Symbole in der unteren rechten Ecke anklickbar machen.

2. HTML-Struktur:

1. Die entsprechenden Koordinaten müssen nicht geändert werden, nur die Proportionen ändern 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>

Nach dem Login kopieren

2. Wenn mehrere Bilder vorhanden sind, entspricht ein Bild einer Karte und die Klasse muss nicht geändert werden. Ändern Sie einfach den Namenswert der Karte und die entsprechenden Usemap-Wert. name=usemap Sie sind ein CP-Paar, trennen Sie sie nicht, geben Sie ihnen den gleichen Wert.

 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>

Nach dem Login kopieren

3. Stylesheet:

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

4. JS legt den Anteil des Bildes fest: (Denken Sie daran, jquery zu zitieren: )

 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();

Nach dem Login kopieren

5. Zusammenfassung:

Aufmerksame Kinder werden herausfinden, warum andere Bilder mit einer ID versehen, aber ich füge Klasse hinzu. Der Grund dafür ist, die Verwendung der Kartenpositionierung für mehrfach gezoomte Bilder zu erleichtern. Ähm... lesen Sie es einfach ein paar Mal und Sie werden es verstehen!

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Verwendung einer HTML-Karte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!