リンク個所につけたアイコンが印刷時に出ないと指摘された時の最終手段です。

IE 以外では content プロパティーを使って実現していますが、IE では expression を使っているので積極的にはお勧めはできません。最終手段としてご参考に。

• 動作確認用の demo

Firefox, Opera, Safari などでは、E:before,E:after 疑似要素と content プロパティーをサポートしています。content プロパティーをつかって表示される画像は背景ではないので印刷時にも表示されます。

content プロパティーを利用してリンク個所などで使うアイコンを表示することも可能です。

e.g.

a.link:before{
	content:url(img/ico.png)
}

ただし、IE 7 以下では E:before,E:after 疑似要素と content プロパティーをサポートしていません。最終手段として、 expression を使うことで content プロパティーと似た動作をさせることはできます。

リンク箇所にアイコンを表示するためには

a.link{
  /behavior: expression(
  this.style.behavior || (
  this.innerHTML = '<img src="ico.png" alt="" />' + this.innerHTML,
  this.style.behavior = "none"
  )
  );
}

のようなソースコードで実現が可能です。

ソースコードの意味は

1. /behavior のようなプロパティーの書き方をすることで、IE 6, 7 を対象にする
2. /behavior にの値に expression を設定し CSS 内でスクリプトを動かす
3. セレクター (a.link) に対して、現在の自身の HTML に <img src="ico.png" alt="" />を追加する。例えば、<a href="foo" class="link">リンク</a> は <a href="foo" class="link"><img src="ico.png" alt="" />リンク</a> に置き換えられる
4. expression は、常に実行し続けるので this.style.behavior = "none" として自身を上書きし止める

といった具合です。

expression で追加する画像のパスに CSS から相対パスを使いたいときはもちょっと工夫します。

画像を配置しているディレクトリのパスをうまくとる必要があるので CSS ファイル自身のパスを目印にして、画像の格納されえいるディレクトリのパスを取得します。

• /common/css/sample.css
• /common/img/ico.png

のような構成のときは、/common/css/sample.css の css/sample.css を img/ に置き換えれば画像を格納したディレクトリが取れるので

body{ /* get Common Directory */
	behavior: expression(
	this.style.behavior ||
	iconDir = document.getElementsByTagName('link')[0].getAttribute('href').replace('css/sample.css','img/'),
	this.style.behavior = "none"
	)
	);
}

のような感じにしてみます。詳しくは実際のコードを見ながら解析してみてください。

ちなみに、expression 内で appendChild をつかって画像を追加しようとするとエラーが起こってしまいます。

自分でも実際に使ってみましたが、なにかあるかもしれませんので最終手段としてお使いください…。

でも、回りくどいことをするくらいなら最初から HTML 上にアイコンの画像を埋め込むほうがよいですよね…。

トラックバックURI

http://www.yomotsu.net/lab/css/tips_print-icon/trackback

実験室に戻る

Web サイト内検索