WEBTECH 網頁設計教學站
HTML img 圖片超連結設計 (讓圖片具有超連結效果)
HTML img 圖片超連結設計會用到的兩個 HTML 功能就是 img tag 圖片標籤以及 a href 超連結的功能,只要將超連結a href 套用到網頁的 img 圖片上,就可以做出具有超連結功能的圖片囉!而且所有主流的瀏覽器(Browser)都支援圖片超連結效果,我們先帶一下網頁圖片的語法以及超連結的語法,在範例中將兩者套用在一起讓各位參考。

會用到的語法
網頁圖片語法:<img src="圖片網址" title="圖片提示文字" alt="圖片替代文字">
網頁的超連結:<a href="連結網址" target="連結目標" title="連結說明文字">
這兩的都屬於 HTML 網頁設計的基礎屬性,若想進一步了解這兩個語法,請參閱以下兩篇介紹。
若您已經很熟悉以上語法規則,請接著看範例如何把兩者套用在一起成為有超連結效果的圖片。

HTML img 圖片超連結設計範例
<a href="#" title="測試超連結"><img src="圖片網址" alt="測試圖片" border="0"></a>
範例的實際效果
測試圖片
透過 a href 標籤把 img 標籤整個包起來,就可以給 img 圖片標籤加上超連結的效果,這種設計手法非常的普遍,各位讀者可能有注意到我們在 img 標籤內使用了 border="0" 這個屬性,這是做什麼用的呢?答案是設定 img 的邊框為 0,因為少部份瀏覽器(如 IE)會自動把超連結圖片加上外框,變得很難看,我也不知道為什麼要這樣設計,為了避免這樣的情況,網頁設計師通常會在具有超連結效果的 img 標籤內,再用 border 屬性將邊框設為 0,讓瀏覽器不會顯示出醜醜的邊框,這也是一種常用的美化設計技巧。

更多網頁圖片設計技巧

連絡我們