HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

圖片添加區(qū)域鏈接的基本寫(xiě)法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過(guò)<map>的名字來(lái)驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來(lái)劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來(lái)劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫(huà)出了下圖中殲20的邊框線(xiàn)（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問(wèn)題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問(wèn)題。

Gimp是一款類(lèi)似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開(kāi)源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開(kāi)，界面如下：

點(diǎn)擊“文件”找到“打開(kāi)”：

選擇要打開(kāi)的圖片名字：

點(diǎn)擊名稱(chēng)后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開(kāi)”即可：

打開(kāi)后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫(xiě)“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過(guò)鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚(yú)師兄，一起精研技藝。

首先，我們需要了解HTML中如何添加圖片。在HTML中，我們使用`<img>`標(biāo)簽來(lái)插入圖片。`<img>`標(biāo)簽有幾個(gè)重要的屬性，包括`src`、`alt`和`width`、`height`等。`src`屬性用于指定圖片的URL地址，`alt`屬性用于提供圖片無(wú)法加載時(shí)的替代文本，而`width`和`height`屬性則用于設(shè)置圖片的寬度和高度。

下面是一個(gè)簡(jiǎn)單的示例，展示如何在HTML中添加圖片：

<img src="這里寫(xiě)圖片地址，要帶http協(xié)議，比如：https://www.chaojilu.com" alt="看不到圖片，就顯示這個(gè)文字" width="500" height="300">

在這個(gè)示例中，我們使用了`<img>`標(biāo)簽，并通過(guò)`src`屬性指定了圖片的URL地址。同時(shí)，我們還設(shè)置了`alt`屬性以提供替代文本，并通過(guò)`width`和`height`屬性設(shè)置了圖片的尺寸。

接下來(lái)，我們來(lái)看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標(biāo)簽來(lái)創(chuàng)建超鏈接。`<a>`標(biāo)簽的`href`屬性用于指定鏈接的目標(biāo)地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部。

下面是一個(gè)示例，展示如何為圖片添加超鏈接：

<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到圖片，就顯示這個(gè)文字"width="這里寫(xiě)寬度" height="高度">>
</a>

在這個(gè)示例中，我們將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部，并通過(guò)`href`屬性指定了鏈接的目標(biāo)地址。當(dāng)用戶(hù)點(diǎn)擊圖片時(shí)，將會(huì)跳轉(zhuǎn)到指定的網(wǎng)址。同時(shí)，我們還通過(guò)`alt`屬性為圖片提供了替代文本，以便在圖片無(wú)法加載時(shí)為用戶(hù)提供提示。

除了基本的添加圖片和超鏈接功能外，我們還可以通過(guò)一些技巧來(lái)優(yōu)化圖片的顯示和加載效果。例如，我們可以使用CSS樣式來(lái)設(shè)置圖片的邊框、圓角等外觀屬性，提升頁(yè)面的美觀度。同時(shí)，我們還可以通過(guò)壓縮圖片文件大小、使用懶加載等技術(shù)來(lái)優(yōu)化圖片的加載速度，提高用戶(hù)體驗(yàn)。

需要注意的是，在添加圖片和超鏈接時(shí)，我們需要確保所使用的圖片資源是合法且可訪(fǎng)問(wèn)的。避免使用未經(jīng)授權(quán)或侵權(quán)的圖片資源，以免引發(fā)法律問(wèn)題。同時(shí)，我們還應(yīng)該關(guān)注圖片的版權(quán)和使用協(xié)議，確保在使用圖片時(shí)遵守相關(guān)規(guī)定。

總之，通過(guò)使用HTML的`<img>`和`<a>`標(biāo)簽，我們可以輕松地在網(wǎng)頁(yè)中添加圖片并為圖片添加超鏈接。通過(guò)合理設(shè)置屬性和優(yōu)化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶(hù)提供更好的瀏覽體驗(yàn)。

各位鹿友有什么不懂可以在評(píng)論區(qū)留言，咱們一起探討學(xué)習(xí)。

在線(xiàn)咨詢(xún)

上一篇：HTML5來(lái)了：5個(gè)好用的混合式App開(kāi)發(fā)工具
下一篇：人生苦短，我用PyCharm（附鏈接）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

圖片添加區(qū)域鏈接的基本寫(xiě)法

目錄

您的項(xiàng)目需求