ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

リンク先が拡張子や外部サイトの時にそれぞれアイコンを表示

December 04 2011

Webを見ていてリンクをクリックするといきなり立ち上がるAdobe Reader。
「PDFならそう書いとけや!」とほんのり殺意がわく瞬間ですね。
非力なサブマシンならOS毎巻き込んで石地蔵状態になる可能性もあり
なかなかこいつは無視できない事例。

自分が制作する場合にはこういう事はかなり気をつけてますが
昔はそれこそテキストリンクの横にimgタグで
ひとつひとつ画像を貼りつけていたもんです。

しかし、このご時世、もっと簡単な方法ないんかいと世間に問えば
それがあるんですよ奥さんっ!
CSS3なら以下の書き方が可能です。

参考サイト:コリス様

外部リンクでアイコンを変更する場合
a[href^=”http://”]{
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}

判別する箇所のサンプル -mailto
a[href^=”mailto:”]

判別する箇所のサンプル -PDF
a[href$=’.pdf’]

判別する箇所のサンプル -圧縮ファイル
a[href$=’.zip’], a[href$=’.rar’], a[href$=’.gzip’]

判別する箇所のサンプル -画像
a[href$=’.gif’], a[href$=’.jpg’], a[href$=’.jpeg’], a[href$=’.png’]

判別する箇所のサンプル -ドキュメント
a[href$=’.xls’], a[href$=’.csv’], a[href$=’.doc’], a[href$=’.txt’]

もちろんこれはIE6では動作しないので、IE6対応の場合
behaviorを使って以下の記述もプラス。

* html a{
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("自サイトドメイン")) ? " external" : "",
this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : "",
this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : "",
this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : "",
this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : "",
this.className += this.getAttribute("href").match(/^mailto.*/) ? " mailto" : "",
this.style.behavior = "none"
);
} 

それでも、めんどくせえという人はJQueryを使いましょう。
もちろんJavascriptをオフにされると動作しません。

以下のサイトで紹介されてるやり方が一番簡単です。
Lost Technology様の「リンクしているファイルのアイコンを表示
http://www.losttechnology.jp/WebDesign/2010/linkicon.html

アイコン画像は・・・・・それぐらい作ろうね、と言いたいけども
ICON WANTEDって便利なサイトもあったり。
http://iconwanted.com/

一度、この設定をしておけば使い回しも利くし
うっかり間違いもなくなるので便利には違いないですね。

| Posted in CSS, Web関連 | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31