My studying notebook

2008/05/20

Showing Hyperlink Cues

5/20/2008 07:16:00 PM Posted by Unknown , 1 comment
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;
}


1 comment: