如何用自建的圖示標籤來取代冗長的<img>標籤？

你知道的，網頁的內容若要豐富，難免會需要一些小圖示配合演出。至於是哪些時候呢？以我自己的情況為例，寫食記總得附上地圖連結吧，寫讀書心得總會附上購買書籍連結吧，再者大部分的部落格文章總離不開會有許多不可避免的參考資料連結吧，諸如此類。

我後來發現，如果這些連結前面可以加註分類圖示，一定會更加顯眼，提升被點擊的機會。如果需要製作GIF動畫小圖示的話，可以參考這篇文章。

關於在網頁裡面插入圖示的解決方案可能有很多種，最單純的就是利用<img>標籤了。只是這樣的標籤畢竟太冗長了，還要設定有的沒的屬性，比方說透過「style="border:0;"」來避免Blogger系統的某些版型會為圖片加上的外框。因此利用自建新的標籤來取來代之，將可以省下許多麻煩，不僅標籤插入的程式碼變短了，同時其名稱也可以命名成容易記憶的名稱，例如<icon_xxx>之類的。

關於前面提到過的地圖、購物車和參考資料等圖示的自建標籤程式碼如下所示：

icon_map {
  background: url("http://jarsing.com/gallery/icon_map.gif") no-repeat left center;
  padding-left: 20px;
}

icon_cart {
  background: url("http://jarsing.com/gallery/icon_cart.gif") no-repeat left center;
  padding-left: 20px;
}

icon_ref {
  background: url("http://jarsing.com/gallery/icon_ref.gif") no-repeat left center;
  padding-left: 20px;
}

在上述的程式碼裡面，必須留意幾點：首先，因為圖案是以背景圖載入的緣故，所以無法透過滑鼠來選取；再者，在今日普遍都是XHTML架構的網頁裡面，只要使用像是<icon_map/>這樣的標籤即可，不需要每次都寫<icon_map></icon_map>；最後，圖示大小是16x16，但是卻用padding-left硬是將呈現區域的寬度擴張為20px，並且將圖示置中擺放，形同左右各留白了2個像素寬。

喔，對了。在Blogger系統裡面，將上述這些程式碼放在「/* Page Structure */」區段之前，如此這些自建標籤就可以在部落格文章裡面使用了。

連結：製作GIF動畫的工具──Microsoft GIF Animator