整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先我們看看效果：
實現這樣的功能需要學習以下幾點內容。
1.認識<img/><map><area/></map>基本結構
首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>圖片區域鏈接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：
<body>
<img/>
<map>
<area/>
</map>
</body> 指定要添加區域鏈接的圖片的路徑，如下：
<img src="img/image1.jpg"/>
<map>
<area/>
</map>讓<img>標簽通過<map>的名字來驅使<map>為自己工作。
需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。
第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。
示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>下面來劃分區域。
2.為圖片劃分區域的方法
<area>是用來劃分區域的標簽，area也是“”區域“”的意思。
默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。
分別添加三個形狀，示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。
為<area>添加coords屬性可以指定區域的位置和范圍。
如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：
如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：
如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如
這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：
這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？
3.使用Gimp軟件精準定位圖片區域
使用Gimp軟件可以解決這個問題。
Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。
下載地址：https://www.gimp.org/
雙擊安裝即可，注意選擇一下安裝目錄。
完成安裝之后打開，界面如下：
點擊“文件”找到“打開”：
選擇要打開的圖片名字：
點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：
打開后如圖：
把鼠標放到圖像的任意位置，看左下角：
這里就會顯示我們鼠標所在的像素坐標數值。
這樣我們就能方便地寫“poly”的coords了。
請在空閑時找一張圖片演練一下吧！
4.為區域添加鏈接
在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：
href="https://www.zhihu.com/question/284642168" 添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：
title="殲20氣動外形分析"今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。
使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
網頁設計中，添加圖片并為其添加超鏈接是常見的需求。通過使用HTML，我們可以輕松實現這些功能。下面將詳細介紹如何實用地添加圖片，并為圖片添加超鏈接。
html代碼
首先，我們需要了解HTML中如何添加圖片。在HTML中，我們使用`<img>`標簽來插入圖片。`<img>`標簽有幾個重要的屬性，包括`src`、`alt`和`width`、`height`等。`src`屬性用于指定圖片的URL地址，`alt`屬性用于提供圖片無法加載時的替代文本，而`width`和`height`屬性則用于設置圖片的寬度和高度。
下面是一個簡單的示例，展示如何在HTML中添加圖片：
<img src="這里寫圖片地址，要帶http協議，比如：https://www.chaojilu.com" alt="看不到圖片，就顯示這個文字" width="500" height="300">在這個示例中，我們使用了`<img>`標簽，并通過`src`屬性指定了圖片的URL地址。同時，我們還設置了`alt`屬性以提供替代文本，并通過`width`和`height`屬性設置了圖片的尺寸。
接下來，我們來看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標簽來創建超鏈接。`<a>`標簽的`href`屬性用于指定鏈接的目標地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標簽放置在`<a>`標簽內部。
下面是一個示例，展示如何為圖片添加超鏈接：
<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到圖片，就顯示這個文字"width="這里寫寬度" height="高度">>
</a>在這個示例中，我們將`<img>`標簽放置在`<a>`標簽內部，并通過`href`屬性指定了鏈接的目標地址。當用戶點擊圖片時，將會跳轉到指定的網址。同時，我們還通過`alt`屬性為圖片提供了替代文本，以便在圖片無法加載時為用戶提供提示。
除了基本的添加圖片和超鏈接功能外，我們還可以通過一些技巧來優化圖片的顯示和加載效果。例如，我們可以使用CSS樣式來設置圖片的邊框、圓角等外觀屬性，提升頁面的美觀度。同時，我們還可以通過壓縮圖片文件大小、使用懶加載等技術來優化圖片的加載速度，提高用戶體驗。
需要注意的是，在添加圖片和超鏈接時，我們需要確保所使用的圖片資源是合法且可訪問的。避免使用未經授權或侵權的圖片資源，以免引發法律問題。同時，我們還應該關注圖片的版權和使用協議，確保在使用圖片時遵守相關規定。
總之，通過使用HTML的`<img>`和`<a>`標簽，我們可以輕松地在網頁中添加圖片并為圖片添加超鏈接。通過合理設置屬性和優化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶提供更好的瀏覽體驗。
各位鹿友有什么不懂可以在評論區留言，咱們一起探討學習。
.什么是文本和圖像鏈接！
瀏覽網頁時，會看到一些帶下劃線的文字。，將光標移到文字上時，光標將變成手形，單擊會打開一個網頁，這樣的鏈接就是文本鏈接。
在網頁中瀏覽內容時，若將光標移到圖像上，光標會變成手形，單擊會打開一個網頁，這樣的鏈接就是圖像鏈接。
文本鏈接
圖像鏈接
2.創建鏈接的方法！
使用<a>標簽可以實現網頁超鏈接，但<a>標簽需要定義錨來指定鏈接目標。錨（anchor）有兩種用法，介紹如下：
（1）通過使用href屬性，創建指向另外一個文檔的鏈接（或超鏈接）；
（2）通過使用name和id屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）。
使用href屬性的代碼格式如下：
<a href="鏈接地址">創建鏈接的文本或圖片</a>
使用name屬性的代碼格式如下：
<a name="value">創建鏈接的文本或圖片</a>
name屬性用于指定錨（anchor）的名稱，可以創建（大型）文檔內的書簽。
使用id屬性的代碼格式如下：
<a id="value">創建鏈接的文本或圖片</a>
3.創建網頁內的文本鏈接！
創建網頁內的文本鏈接主要使用href屬性來實現，如在網頁中做一些知名網站的友情鏈接，具體操作方法如下。
（1）編寫代碼如下圖所示：
（2）在瀏覽器中打開文件，預覽效果如下所示，可以看到帶有超鏈接的文本呈現淺紫色。
小提示：鏈接地址前的“http:// ”不可省略，否則會出現錯誤提示。
4.創建網站內的圖像鏈接！
使用<a>標簽為圖片添加鏈接的代碼格式如下：
<a href="鏈接目標l"><img src="圖片"/></a>
下面是一個簡單的圖片鏈接案例。
（1）編寫代碼如下圖所示：
（2）在瀏覽器中打開文件，預覽效果如下所示。光標放在圖片上呈現抓手形，單擊后可跳轉到指定網頁。
瀏覽器截圖
小提示：文件中的圖片要和當前網頁文件在同一個目錄下，鏈接的網頁沒有加“http:// ”，默認為當前網頁所在目錄。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
