html中area圖片熱點怎么使用

這篇文章給大家分享的是有關html中area圖片熱點怎么使用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　<area>標記主要用于圖像地圖，通過該標記可以在圖像地圖中設定作用區(qū)域（又稱為熱點），這樣當用戶的鼠標移到指定的作用區(qū)域點擊時，會自動鏈接到預先設定好的頁面。其基本語法結(jié)構(gòu)如下：

　　<area class=typeid＝Valuehref＝urlalt＝textshape＝area-shapecoods＝value>

　　class和id：是分別指定熱點的類型和id號。

　　alt：用于設定熱點的替代性文字。

　　href：用于設定該熱點所鏈接的url地址。

　　shape和coords：是兩個主要的參數(shù)，用于設定熱點的形狀和大小。其基本用法如下：

　　<area shape="rect"coords="x1,y1,x2,y2"href=url>表示設定熱點的形狀為矩形，左上角頂點坐標為（X1,y1），右下角頂點坐標為（X2,y2）。

　　<area shape="circle"coords="x1,y1,r"href=url>表示設定熱點的形狀為圓形，圓心坐標為（X1,y1），半徑為r。

　　<area shape="poligon"coords="x1,y1,x2,y2......"href=url>表示設定熱點的形狀為多邊形，各頂點坐標依次為（X1,y1）、（X2,y2）、（x3,y3）......。

　　備注：x1,y1,x2,y2這幾個點的位置是根據(jù)圖片而定的，不是根據(jù)窗口的大小而定。

　　<area>標記是在圖像地圖中劃分作用區(qū)域的，因此其劃分的作用區(qū)域必須在圖像地圖的區(qū)域內(nèi)，所以在用<area>標記劃分區(qū)域前必須用HTML的另一個標記<map>來設定圖像地圖的作用區(qū)域，并為指定的圖像地圖設定名稱，該標記的用法很簡單，即<mapname="圖像地圖名稱">......</map>。

　　下面通過一個例子來說明這兩個標記的用法：

　　這里是一幅新書架的圖片，要做的效果是：當鼠標點“網(wǎng)址大全”這本書時，新開一窗口，顯示關于這本書的簡介及訂單的網(wǎng)頁（urlall.htm）；當鼠標點“網(wǎng)站設計攻略”這本書時，新開一窗口，顯示關于這本書的簡介及訂單的網(wǎng)頁（siteall.htm）；當鼠標點“網(wǎng)頁技巧大全”這本書時，新開一窗口，顯示關于這本書的簡介及訂單的網(wǎng)頁（pagejqlall.htm）。制作方法：

　　1、插入圖片，并設置好圖像的有關參數(shù)，且在<img>標記中設置參數(shù)usemap="newbook"ismap，以表示對圖像地圖（newbook）的引用；

　　2、用<map>標記設定圖像地圖的作用區(qū)域，并取名為：newbook；

　　3、分別用<area>標記針對三本書的位置劃分出三個矩形作用區(qū)域，并設定好其鏈接參數(shù)href。

　　制作完成，本例的源代碼如下：

　　<img src="http://www.webjx.com/images/logo.gif"width="207"height="148"alt="新書架"hspace="10"align="left"usemap="#newbook"border="0">

　　<map name="newbook">

　　<area shape="rect"coords="56,69,78,139"href="urlall.htm"target="_blank"alt="這里收集十萬多個網(wǎng)址。"title="這里收集十萬多個網(wǎng)址。">

　　<area shape="rect"coords="82,70,103,136"href="siteall.htm"target="_blank"alt="網(wǎng)站設計師的啟蒙讀本。"title="網(wǎng)站設計師的啟蒙讀本。">

　　<area shape="rect"coords="106,68,128,136"href="pageall.htm"target="_blank"alt="網(wǎng)頁制作者不可不讀的書。"title="網(wǎng)頁制作者不可不讀的書。">

　　</map>

　　在制作本文介紹的效果時應注意的幾點：

　　1、在<img>標記不要忘記設置usemap、ismap參數(shù)，且usemap的參數(shù)值必須與<map>標記中的name參數(shù)值相同，也就是說，“圖像地圖名稱”要一致；

　　2、同一“圖像地圖”中的所有熱點區(qū)域都要在圖像地圖的范圍內(nèi)，即所有<area>標記均要在<map>與</map>之間；

　　3、在<area>標記中的cords參數(shù)設定的坐標格式要與shape參數(shù)設定的作用區(qū)域形狀配套，避免出現(xiàn)在shape參數(shù)設置的矩形作用區(qū)域，而在cords中設置的卻是多邊形區(qū)域頂點坐標的現(xiàn)象出現(xiàn)。

　　HTML和XHTML之間的差異

　　在HTML中，<area>元素不需要結(jié)束標簽。

　　但XHTML中，<area>元素必須正確關閉。

感謝各位的閱讀！關于“html中area圖片熱點怎么使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！