網站不同於任何傳播媒介。 將網站與諸如印刷，廣播甚至電視等以前的媒體格式區別開來的主要原因之一是“ 超鏈接 ”的概念。
超鏈接通常也被稱為“鏈接”，它使Web變得如此動態。 與可以引用其他文章或其他資源的印刷出版物不同，網站可以使用這些鏈接實際將訪問者發送到其他頁面和資源。 沒有其他廣播媒體可以做到這一點。 您可以在廣播中收聽廣告或在電視上觀看廣告，但是沒有超鏈接可以通過網站輕鬆完成的方式將您帶到這些廣告中的公司。 鏈接真的是一個驚人的通信和交互工具！
通常，在網站上找到的鏈接是指導訪問者訪問同一網站其他頁面的文本內容。 網站的導航是實踐中文本鏈接的一個例子，但鏈接不需要基於文本。 您也可以輕鬆鏈接您網站上的圖片。 讓我們看看這是如何完成的，接下來是一些您想要使用基於圖像的超鏈接的實例。
如何鏈接圖像
你需要做的第一件事是將圖像本身放置在HTML文檔中。 基於圖像鏈接的常見用法是網站的徽標圖形，然後鏈接回該網站的主頁。 在下面的示例代碼中， 我們使用的文件是我們徽標的SVG 。 這是一個不錯的選擇，因為它可以讓我們的圖像在不同分辨率下縮放，同時保持圖像質量和較小的整體文件大小。
以下是如何將圖像放置在HTML文檔中的方法：
在圖片標籤周圍，您現在可以添加錨點鏈接，在圖片之前打開錨點元素，並在圖片之後關閉錨點。 這與您將鏈接文本的方式類似，只是將您希望與錨標記鏈接的文字包裝起來，而不是包裹圖像。 在下面的示例中，我們將鏈接回我們網站的主頁，即“index.html”。
將此HTML添加到頁面時，請勿在錨標記和圖像標記之間放置任何空格。 如果你這樣做，一些瀏覽器會在圖像旁添加小滴，這看起來很奇怪。
標誌圖像現在也可以作為主頁按鈕，這幾乎是當今的Web標準。 請注意，我們在HTML標記中不包含任何視覺樣式，例如圖片的寬度和高度。 我們將這些視覺樣式留給CSS，並保持HTML結構和CSS樣式的清晰分離。
一旦你開始使用CSS，你為這個標誌圖形編寫的樣式可能包括調整圖像的大小，包括多設備友好圖像的響應式樣式以及任何想要添加到圖像/鏈接的視覺效果，如邊框或CSS放下陰影。 如果您需要額外的“鉤子”來與您的CSS樣式一起使用，您還可以給圖片或鏈接一個類屬性。
用於圖像鏈接的用例
因此添加圖像鏈接非常簡單。 正如我們剛才所看到的，你必須做的就是用適當的錨標籤來包裝圖像。 你的下一個問題可能是“除了前面提到的標識/主頁鏈接例子之外，你什麼時候可以在實踐中做到這一點？”
這裡有一些想法：
- 圖庫中的縮略圖圖像鏈接到這些圖像的較大版本。
- 單獨用於表示內容的圖像，如電子商務網站的產品照片。
- 作為其他內容（如博客文章或新聞稿）的一部分的預告圖片吸引人們注意到內容為他們提供了一個可點擊或點擊閱讀完整文章的目標區域。
- 圖標圖像用作連接到網站內特定功能或頁面的按鈕。
- 社交媒體鏈接使用對該網站或公司很重要的各種社交媒體網站的可識別徽標。
- 用作某些功能按鈕的圖像，如表單提交（最佳實踐註釋 - 從網站性能角度來看，純粹使用CSS設計的按鈕是比圖片按鈕更好的選擇）。
使用圖像時的提醒
圖像可以在網站的成功中發揮重要作用。 上面提到的一個例子提到了將圖像和其他內容一起使用，以引起對內容的關注並讓人們閱讀它。
在使用圖片時，您必須注意根據您的需要選擇正確的圖片 ，其中包括正確的圖片主題，格式，並確保您在網站上使用的任何圖片都針對網站傳送進行了適當的優化 。 這可能看起來像添加圖像很多工作，但回報是值得的！ 圖片真的可以增加一個網站的成功。
請毫不猶豫地在您的網站上使用適當的圖片，並在需要時將這些圖片鏈接到您的內容中，並註意這些圖片的最佳實踐，並在您的網頁設計工作中正確並負責任地使用這些圖片/鏈接。