Showing Hyperlink Cues

HyperLink讓我們可以將視窗導到我們指定的頁面
包含打開特定格式之檔案、Send mail。
例如：

Google 首頁
mailto: me
View Holidays

我們都可以在HyperLink中完成這些動作

而上述3種的連結樣式若無特別指定
則會套用瀏覽器的預設值

除此之外
我們亦可以利用Css or Javascript為這些特別的連結
加上容易辦別的圖示
例如：

• 外部連結檔案圖示
• mailto: link 圖示

Cues With Css

利用Css為hyperlink加上小圖示
必需使用到Attribute選擇器(for IE 7, Firefox 2, Opera 9。browser-support#css)
由於IE6並不支援Attribute選擇器，所以就由Javascript來實作

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

1. a：Element 選擇器
2. href：Attribute選擇器
3. $：href 屬性以pdf結束

Cues With Javascript

由於在IE6並不支援Attribute Selector
所以就使用Javascript的語法來實作

   function fileLinks() {
       var fileLink;
       if (document.getElementsByTagName('a')) {
           for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {      
               if (fileLink.href.indexOf('http:') != -1) {
                   fileLink.setAttribute('target', '_blank');
                   fileLink.className = 'externalLink';
               }
               if (fileLink.href.indexOf('pdf') != -1){
                   fileLink.className = 'pdflink';              
               }
           }
       }
   }
   window.onload = function() {
       fileLinks();
   }

       .externalLink {
            padding-right: 14px;
            background: url(App_Themes/MyTheme/Images/hyperlink.png) right center no-repeat;
       }
      .pdflink {
            padding-right: 18px;
            background: transparent url(App_Themes/MyTheme/Images/icon_ttf.gif) no-repeat center right;
       }