最近在做項目的時候,前輩說到了“圖片熱區(qū)”這個高大上的詞兒修己,聽完立馬百度了一下给郊,原來這么簡單~~~
?什么是圖片熱區(qū)
1.熱區(qū)就是在網(wǎng)頁上進行了鏈接的區(qū)域。形象點說就是在網(wǎng)頁上鼠標箭頭變成小手的那個區(qū)域彪笼。
2.熱區(qū)是在網(wǎng)頁制作時設(shè)定的钻注。比如一個版面里面(落地頁)表面上看上去是一張整體的圖,但是實際上后臺用切割的方式切割成一塊一塊的不同的鏈接區(qū)域配猫,就成為“熱區(qū)”幅恋。
?熱區(qū)應用
1.中國地圖電子圖中的,用熱區(qū)分割成每一個區(qū)域泵肄,鏈接到每一個指定的地方捆交。
2.有一些網(wǎng)頁版的密室逃生和尋寶游戲,用的也是這種技術(shù)【我猜的??O(∩_∩)O哈哈~】
?熱區(qū)實現(xiàn)
<img src="bg.jpg" border="0" usemap="#bgImg" alt="" />
<map name="bgImg" id="bgImg">
<area shape="circle" coords="180,139,14" href ="table1.htmll" alt="" />
<area shape="circle" coords="129,161,10" href ="table2.html" alt="" />
<area shape="rect" coords="1820,0,1920,100" href ="table3.html" alt="" />
</map>
shape="circle" coords="x,y,r" 區(qū)域為圓形 后面是圓心坐標和以像素為單位的半徑
shape="rect" coords="x1,y1,x2,y2" 區(qū)域為矩形 矩形的左上右下兩點的坐標
shape="poly" coords="x1,y1,x2,y2,x3,y3....區(qū)域為多邊形 多邊形所有頂點的坐標
以上所有坐標都是相對于圖形img左上腳坐標而言的
**<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決于瀏覽器)腐巢,所以我們應同時向 <map> 添加 id 和 name 屬性品追。
其中如果area劃分的區(qū)域部分交叉則前面的area覆蓋后面的area.即第一個area覆蓋第二個area。