[jquery] 圖片熱區隨圖片大小自由縮放

在圖片上直接畫出帶超級鏈接熱區元素map和area相信大家並不陌生，Dreamweaver等網頁制作軟件都有直接在圖片上繪制帶超級鏈接的熱區工具，但是直接繪制的熱區是不能隨着圖片自適應放大和縮小的，現在很多網頁對瀏覽器分辨率兼容性要求很高，多數都是用的百分比來定義圖片的尺寸，希望圖片能隨着分辨率的不同，顯示設備的不同，自適應的顯示最佳效果，這種情況下如何定義圖片熱區的尺寸可以隨着圖片一起變化呢？

這是我今天遇到的問題，問了百度個把小時也沒有找到答案，忽悠人的錯誤答案也不少。熱區的范圍和坐標主要是由area元素的coords屬性來決定的，例如下面這行代碼

<area shape="rect" coords="338,308,609,589" >

 

這是一個矩形熱區的范圍和坐標，你可以看到有四個數字，這四個數字代表的是什么意思呢，前兩個數字是矩形熱區左上角的點相對於圖片總長寬的橫坐標和縱坐標，后面兩個數字是矩形熱區右下角的點相對於圖片總長寬的橫坐標和縱坐標。網上有的說，如果圖片是用百分比來定義的話，這四個數字也用百分比定義應該就可以吧，很遺憾不行，這地方貌似只能是純整數的數值方能起效果，加個“%”符號都不起任何作用了。想不通百度貼吧里居然還有不少答案是說用百分比數值來定義。什么都問百度也不一定都是對的，如果這篇文章是被百度搜出來的，那你一定要耐心的看完。

我們如何定義個熱區讓它隨圖片的大小來自由縮放呢？不急，只要功夫深，鐵杵磨成綉花針，方法總是有的，借助js可以重新定義coords的屬性值，讓其隨着圖片的大小來生成新的數值。怎么做？高手應該想到辦法了，我這里就只介紹下jquery方法吧。假如我有一張id=pic的圖片，寬度是1920，高度是1080，代碼如下

<img id="pic" src="pic.jpg" alt="" usemap="#Map" width="1920" height="1080" />
那么繪制一個矩形熱區，是可以隨着圖片大小自由縮放的呢，代碼參考下面

var picw = $("#pic").width();
var pich = $("#pic").height();
var x1 = parseInt(picw*0.1820);
var y1 = parseInt(pich*0.2955);
var x2 = parseInt(picw*0.3280);
var y2 = parseInt(pich*0.5645);
$(".box").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')

 

你一定很奇怪，上面這段代碼各個數值都要乘以一個小數是怎么得出來，首先你還是要在原始大小的圖片上繪制一個你所需要的矩形范圍和坐標，例如下面這行代碼

<area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank" onfocus= "this.blur() " >

 

然后用所得到的coords屬性值對應的去除原始圖片的長和寬就獲得了當前圖片熱區范圍和位置與原始圖片的比例，然后每次都用js獲取圖片的寬和高來乘以這個比例值就總是可以得到熱區相對於圖片的真實大小和位置，不管圖片怎么變化，熱區也會隨之改變。建議函數寫在onResize的方法里，這樣在瀏覽器人為縮放的時候，圖片熱區也會隨圖片變化自由變化。