img href 圖片連結

HTML 設計網頁插入圖片可以使用 <img> 標籤,而單純的插入圖片可能無法滿足某些功能,這篇要教你透過 HTML <a> 標籤的 href 功能為圖片加入連結語法,簡單的觀念是將 HTML 的連結語法與圖片語法做結合。

HTML img href 圖片連結範例

<a href="要前往的連結網址"><img src="圖片 URL" border="0"></a>


範例中用 HTML 的連結標籤 <a href="要前往的連結網址"></a> 將圖片標籤 <img src="圖片 URL" border="0"> 整個包起來,意思就是告訴瀏覽器該張圖片需要變成可連結的圖片,更進一步了解 <img> 標籤的用法可以參考此篇:HTML img 圖片標籤

另外 <img> 標籤裡面還用了 border=0 這樣的語法,意思是將圖片邊框設為零,加入這個語法主要原因是 IE 瀏覽器會自動將有連結的圖片加上邊框,可是那不見得是設計師所想要呈現的結果,將邊框設為零,在任何瀏覽器下都不會出現深藍色超連結邊框了。

延伸閱讀
HTML img 圖片標籤
HTML img alt 圖片替代文字
HTML img title 滑鼠移經顯示文字標示
HTML img src 屬性
HTML 圖片插入或加入連結語法
img border 圖片邊框
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C