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，讓瀏覽器不會顯示出醜醜的邊框，這也是一種常用的美化設計技巧。
更多網頁圖片設計技巧
