pg电子为什么老爱维护

書名： HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
作者名：聶斌張明遙
本章字數： 1103字
更新時間： 2019-10-23 17:37:38

3.3 圖像的超鏈接

<A>標記不僅可以為文字設置超鏈接，還可以為圖片設置超鏈接。為圖片設置超鏈接有兩種方式：一種是為整個圖片設置鏈接，只要單擊該圖片，就可以跳轉到鏈接的URL上；另一種是為圖片設置熱點區域，將圖片劃分多個區域，單擊圖片不同的位置將會跳轉到不同的鏈接對象。

3.3.1 將整個圖像設為鏈接

將整個圖像設為鏈接的方法很簡單，只需要將<A>標記中的文字換成<IMG>元素，在<IMG>元素中添加需要設置為超鏈接的圖片即可，其語法格式如下。

<A HREF="鏈接地址"><IMG SRC="源文件地址"></A>

【示例3-6】將圖像設置為鏈接。

01 <HTML> 
02   <HEAD> 
03   <TITLE>圖片鏈接</TITLE> 
04   </HEAD> 
05   <BODY> 
06   <A  TITLE="谷歌"> 
07     <IMG SRC="google.gif">
08   </A><BR> 
09   <A  TITLE=" 百度" TARGET="_blank"> 
10     <IMG SRC="baidu.gif" BORDER="0">
11   </A><BR> 
12   <A  TITLE=" 北京中醫藥大學遠程教育學院" TARGET= 
"_blank"> 
13     <IMG SRC="ibucm.gif" BORDER="0"><BR>
14     北京中醫藥大學遠程教育學院 
15   </A><BR> 
16   </BODY> 
17 </HTML>

示例3-6運行效果如圖3.7所示。由圖3.7可以看出，第7行為圖片增加超鏈接之后，會自動在圖片上增加一個邊框；如果要去掉該圖片上的邊框，可以在<IMG>元素上設置BORDER的屬性值為0（第10行），如第二個超鏈接的百度圖片；也可以將圖片與文字一起設為超鏈接（第13行），如圖3.7中的最后一個超鏈接。

圖3.7　將圖像設為超鏈接運行效果

3.3.2 設置圖像熱點區域

除了可以為整個圖像設置鏈接外，還可以為圖像設置熱點區域，也就是將一個圖片劃分成多個可單擊的區域，單擊不同的區域將跳到不同的鏈接上。在定義圖像熱點區域時，除了要定義圖像熱點區域名稱之外，還要設置其熱區范圍。可以使用IMG元素中的USEMAP屬性和<MAP>標簽來創建，其語法格式如下。

<IMG SRC="URL" USEMAP="#MAP名"> 
<MAP NAME="MAP 名"> 
  <AREA SHAP="" 圖像熱區形狀" COORDS="熱區坐標" HREF=" 鏈接地址"> 
</MAP>

其中USEMAP屬性值的“MAP名”必須是<MAP>標簽中的NAME屬性值，因為可以為不同的圖片創建點擊區域，每個圖片都會對應一個<MAP>標簽，不同的圖片以USEMAP的屬性值來區別不同的<MAP>標簽。需要注意的是，USEMAP屬性值中的“MAP名”前面必須加上#。

<MAP>標簽中至少包含一個<AREA>元素，如果一個圖片上有多個可點擊區域，將會有多個<AREA>元素。在<AREA>元素中，必須指定COORDS屬性，該屬性值是一組用逗號隔開的數字，通過這些數字可以決定可點擊區域的位置，但是COORDS屬性值的具體含義取決于SHAPE的屬性值，SHAPE屬性用于指定可點擊區域的形狀，其值可以為以下幾種。

? CIRCLE：指定可點擊區域為圓形，此時COORDS的值應該是類似x,y,z的表示方法。其中x和y代表圓心的坐標，該坐標是相對圖片的左上角而言的，也就是說，圖片左上角的坐標是0,0，而z代表圓的半徑，單位為像素。CIRCLE也可以簡寫為CIRC。

? POLYGON：指定可點擊區域為多邊形，此時COORDS的值應該是類似x1,y1,x2,y2,x3,y3…的表示方法。其中x1和y1是多邊形的一個頂點的坐標，x2和y2是多邊形的另一個頂點的坐標，至少3個頂點才能形成一個區域（三角形區域）。同樣這些坐標也是相對圖片左上角而言的。因為在HTML中，多邊形會自動閉合，所以在COORDS中，不用重復第一個坐標來閉合整個區域。POLYGON也可以簡寫成POLY。

? RECTANGLE：指定可點擊區域為矩形，此時COORDS的值應該是類似x1,y1,x2,y2的表示方法。其中x1和y2是矩形的一個角的頂點坐標，x2和y2是該角的對角的頂點坐標。同樣這些坐標也是相對圖片左上角而言的。RECTANGLE也可以簡寫成RECT。

官术网_书友最值得收藏!

HTML+CSS+DIV網頁設計與布局（第2版）（微課版）

3.3 圖像的超鏈接

3.3.1 將整個圖像設為鏈接

3.3.2 設置圖像熱點區域