[引用]為超連結加上有意義的圖示

為超連結加上有意義的圖示
出處 :http://www.hkpug.net/node/280

* CSS
* JavaScript

正當你在網上愉快地瀏覽著，按了一下超連結後，瀏覽器突然跳出一個視窗，詢問你是否要儲存一個壓縮檔案，這是多麼不爽的事！若果你的訪客一早知道這個超連結會開啟一個壓縮檔案（你當然有很好的理由送出一個壓縮檔案，例如這是一個軟件包之類），他們的感受會好得多，也可以讓他們自行決定是否開啟，或者什麼時候開啟。傳統的作法是在超連結後面加上一個檔案類型的提示，這可以是一句文字，也可以是一個小圖示，但要把所有這類型的超連結加上提示，除了手動以外，有沒有更方便快捷又不會出錯的方法？Toby Somerville 在 SitePoint 有一篇教學文件介紹兩個作法。

Link icon
方法一：使用 CSS3 屬性選擇器

這是一個純 CSS 的作法，但必須在支援 CSS3 的瀏覽器才適用，所有優秀的瀏覽器都支援這個作法，包括 Firefox、Safari 和 Opera，以下是一個範例：

a[href$='.doc'] {
display: inline-block;
padding-right: 18px;
background: transparent url(images/icon_doc.gif) center right no-repeat;
}

就是這麼簡單，你毋需更改原有的 HTML 頁面便可以自動為所有連到 .doc 的超連結後面加上小圖示 images/icon_doc.gif。這裡要順便推介一組免費、開放版權的小圖示，由 Mark James 在網站 famfamfam 推出的 Silk icons，Mark 設計了 1,000 個 16x16 的小圖示公開給大家免費下載和使用（偉大的人啊）。
方法二：使用 JavaScript

優秀的瀏覽器都支援上面的方法，為什麼還要這麼麻煩用 JavaScript？原因就是為了 IE6，這個方法除了可以用在 IE6 外，還可以在用在 IE5.5 上。

所需的檔案可以在這裡下載。

首先我們需要三個檔案：

1. 閣下的 HTML 檔案，假設是 index.html
2. 下載回來的 CSS 檔案 iKonize.css
3. 把小圖示附在超連結後面的 JavaScript 檔案 iKonize.js

實作如下：

1.

在 index.html 中載入 iKonize.css 及 iKonize.js：

<link type="text/css" rel="stylesheet" href="iKonize.css"/>
<script type="text/javascript" src="iKonize.js"></script>

2.

從 famfamfam 下載小圖示，儲存在特定的資料夾內，修改 iKonize.css 確保所有小圖示的路徑指向這個資料夾。
3.

在 </body> 標籤前調用 iKonize.js：

<script type="text/javascript">iKonize();</script>

就是這麼簡單，如果你有興趣知道 iKonize.css 及 iKonize.js 的操作原理，Toby Somerville 在他的教學文件有詳細解說。