問題一：如果圖片原始尺寸是900px，但是你展示的尺寸是450px,那map就定位不準(zhǔn)了，怎么破？

問題二：如果一個(gè)頁面有多張圖片需要map，怎么做？

一、素材圖片：

1、這是一張900px的素材圖片，我們要讓右下角4個(gè)小圓圖標(biāo)可以點(diǎn)擊。

二、HTML結(jié)構(gòu)：

1、coords的對(duì)應(yīng)坐標(biāo)不用變，只需在JS里面改變其比例就OK！

1 div >
 2、如果有多張圖片，一張圖片對(duì)應(yīng)一個(gè)map，html' target='_blank'>class不用變，改變map的name值和對(duì)應(yīng)的usemap值就好。name=usemap他們倆是一對(duì)CP哦，不要分開它們，給他們一樣的值。
 1 div >
 
三、樣式表：
 ！@#￥%…… *？（404）
四、JS設(shè)置圖片的比例：（ 記得引用jquery: script src= /uploads/allimg/190514/133Z04934-1.jpg /script ）
 1 // 設(shè)置 圖片熱點(diǎn)區(qū)域 2 function set_map() { 3 var mapD = $( area //獲取頁面所有的熱點(diǎn)區(qū)域 4 var imgW = $( .mapImg )[0].naturalWidth || 900; //圖片原始尺寸 5 var imgW01 = $( .mapImg )[0].innerWidth || 450; //圖片現(xiàn)在尺寸 6 var Multiple = imgW01 / imgW; //對(duì)應(yīng)比例 7 var _arrS = //存放coords的值 8 var _arr = []; //存放coords對(duì)應(yīng)的值 9 for (var i = 0; i mapD.length; i++) { //熱點(diǎn)區(qū)域的個(gè)數(shù)10 _arr = [];11 _arrS = $(mapD[i]).attr( coords 12 _arr = _arrS.split( , 13 //coords值的個(gè)數(shù)，圓形為3個(gè)，方形為4個(gè)14 for (var j = 0; j _arr.length; j++) { 15 _arr[j] = _arr[j] * Multiple;16 }17 _arrS = _arr.join( , 18 // 把縮放比例后對(duì)應(yīng)的coords，賦值給原有coords19 $(mapD[i]).attr( coords ,_arrS); 20 }21 }22 set_map();
五、總結(jié)：
 細(xì)心的童鞋就會(huì)發(fā)現(xiàn)，為什么別人給圖片都是加ID而我卻加class，原因是為了方便多張縮放過的圖片使用map定位。額...... 多讀幾遍就懂！
以上就是Html map使用實(shí)例教程的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。