いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > 拡張子を判別して、自動でアイコンが表示されるようにするの巻

拡張子を判別して、自動でアイコンが表示されるようにするの巻

よくある、アイコン表示↓。
わざわざclassをふってあげることなく、リンクされた拡張子を判断してアイコンを表示させちゃうというCSSテク。

HTML

<p><a href="img/example07.pdf">シーフードパスタのレシピはこちら</a></p>
<p><a href="mailto:info@netdehatch.com">お問い合わせはこちら</a></p>

CSS

a[href$=".pdf"] {
  background: url(../example/img/icon_pdf.png) no-repeat 100% 50%;
  padding-right: 20px;
}
*html a.pdf{
  background: url(../example/img/icon_pdf.png) no-repeat 100% 50%;
  padding-right: 20px;
} /*IE6対策*/
a[href ^="mailto:"] {
  background: url(../example/img/icon_mail.png) no-repeat 100% 50%;
  padding-right: 20px;
}
*html a.mailto {
  background:url(../example/img/icon_mail.png) no-repeat 100% 50%;
  padding-right: 20px;
} /*IE6対策*/
*html a{
  behavior: expression(
  this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("css.netdehatch.com")) ? " external" : "",
  this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : "",
  this.className += this.getAttribute("href").match(/^mailto.*/) ? " mailto" : "",
  this.style.behavior = "none"
  );
} /*IE6対策*/

【ポイント】
ちょい命令文が面倒なので、そのままコピペして使うがよろし。

↑ページトップへ

HOMEへ