システム開発ブログ

【CSS】リンク先のファイルによってアイコンを動的に表示する

青木

青木 (2011年2月10日 10:43)
産業システム部

みなさん、こんにちは。
産業システム部の青木です。

リンク先のファイルによってアイコンを動的に表示したいということはありませんか？
CSSに弱い私はCSSでそのようなことが出来るとは思いませんでした。
ただし、今回の方法はIE6では動作しませんので注意してください。

以下はhrefに設定する値によってアイコンを動的に表示する例です。

HTMLは次のように記述します。
<a href="hoge.doc">リンク先はWordファイルです。</a><br>
<a href="hoge.xls">リンク先はExcelファイルです。</a><br>
<a href="hoge.pdf">リンク先はPDFファイルです。</a><br>

次にCSSの記述です。
a[href $='.doc'] { 
	padding-right: 18px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href $='.xls'] { 
	padding-right: 18px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href $='.pdf'] { 
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}

[属性名 = 属性値]が適用する条件になります。
今回の例では[href $='.doc']のように[属性名 $= 属性値]と書いていますが、
これは最後が「.doc」であるということを表しています。

表示結果は次のようになります。
sample.gif
参考URL：http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

今日も良い１日でありますように。
システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ