HTML - 圖片連結

你好，有志於網頁開發的各位！今天，我們將要深入HTML圖片連結的精彩世界。作為你們鄰居的親切計算機老師，我會指導你們踏上這個旅程，一步一步地。所以，拿起你們最喜歡的飲料，舒適地坐好，我們一起展開這次冒險吧！

HTML - Image Links

圖片連結是什麼？

在我們深入細節之前，讓我們先了解HTML圖片連結是什麼。想像你正在創建一個數字相冊。你想要展示照片，但同時也想要讓人們點擊這些照片以訪問其他網頁。這正是HTML圖片連結所做的——它們將圖片轉變為可點擊的連結！

語法

現在，讓我們看看創建圖片連結的語法。別擔心，如果一開始看起來有點令人生畏——我們會一起拆解！

<a href="連結的URL">
<img src="圖片的URL" alt="圖片的描述">
</a>

讓我們剖析這段代碼：

<a href="連結的URL">：這是我們的錨標籤。它創建了連結。
<img src="圖片的URL" alt="圖片的描述">：這是我們的圖片標籤，嵌套在錨標籤內。
</a>：這關閉我們的錨標籤。

HTML圖片連結的範例

範例1：基本的圖片連結

讓我們從一個簡單的範例開始。假設我們想要創建一張可愛小狗的圖片，當我們點擊時，會帶我們去一個關於狗照料的網站。

<a href="https://www.dogcare.com">
<img src="cute_puppy.jpg" alt="一隻可愛的小狗">
</a>

在這個範例中：

圖片文件是 "cute_puppy.jpg"
點擊圖片會帶你去 "https://www.dogcare.com"
如果圖片無法加載，"一隻可愛的小狗" 將作為替代文本顯示

範例2：在新標籤中打開連結

有時候，我們希望連結在新的標籤頁中打開。我們可以通過在錨標籤中添加 target="_blank" 來實現這一點。

<a href="https://www.catcare.com" target="_blank">
<img src="playful_kitten.jpg" alt="一隻愛玩的小貓">
</a>

這段代碼將在小貓圖片被點擊時，在新的標籤頁中打開貓照料網站。

範例3：添加標題

我們可以為我們的圖片連結添加一個標題，當有人將鼠標悬停在圖片上時，它會作為工具提示出現。

<a href="https://www.birdwatching.com" title="了解觀鳥">
<img src="colorful_parrot.jpg" alt="一隻色彩繽紛的鸚鵡">
</a>

現在，當有人將鼠標悬停在鸚鵡圖片上時，他們會看到 "了解觀鳥" 作為工具提示。

HTML圖片中坐標系統

現在，讓我們來討論一些較為高級的內容——HTML圖片中的坐標系統。這在你想讓圖片中不同的部分可點擊並連接到不同頁面時特別有用。

圖片地圖

圖片地圖讓你可以定義圖片上的可點擊區域。這些區域可以是不同的形狀：矩形、圓形或多邊形。

以下是如何創建圖片地圖的範例：

<img src="world_map.jpg" alt="世界地圖" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="0,0,82,126" href="north_america.html" alt="北美洲">
<area shape="circle" coords="90,58,3" href="south_america.html" alt="南美洲">
<area shape="poly" coords="124,58,96,71,102,83,124,83,129,72" href="africa.html" alt="非洲">
</map>

讓我們剖析這些：

我們有一張世界地圖的圖片。
我們定義了一個名為 "worldmap" 的地圖。
在地圖內部，我們定義了三個可點擊區域：

一個矩形代表北美洲
一個圓形代表南美洲
一個多邊形代表非洲

每個區域都有它自己的形狀、坐標和連結。

理解坐標

坐標系統從圖片的左上角（0,0）開始。x坐標在向右移動時增加，y坐標在向下移動時增加。

對於不同的形狀，坐標的工作方式略有不同：

形狀	坐標格式	範例
矩形	x1,y1,x2,y2	coords="0,0,82,126"（從左上到右下）
圓形	x,y,半徑	coords="90,58,3"（中心x,中心y,半徑）
多邊形	x1,y1,x2,y2,...,xn,yn	coords="124,58,96,71,102,83,124,83,129,72"（一系列點）

結論

那就是了，各位！我們一起穿越了HTML圖片連結的世界，從基本語法到進階的圖片地圖。記住，熟練來自練習。嘗試創建有自己的圖片連結和圖片地圖——你可能會驚訝於自己能多快掌握它！

當我們結束時，我想到一位學生曾經告訴我，"老師，我以為HTML只是用於無聊的文本，但現在我發現它可以使網絡變得生動！" 而这正是你們學習的——讓網絡栩栩如生，一次一個圖片連結。

繼續編碼，繼續學習，最重要的是，樂在其中！直到下次，這個親切的鄰居計算機老師這裡結束。快樂編碼！

Credits: Image by storyset