スタイルシートで印刷時の画像入れ替え

質問

ホームページの印刷用レイアウトを考慮しています。
スタイルシートを 「media="print"」で利用することで印刷時のみ利用できるスタイルを設定出来るというのはわかりました。

これを利用して、通常a.jpgを表示させておいて印刷時にその場所にb.jpgを表示・印刷させることは出来ませんか?(画像の入れ替え)

方法があれば教えてください。

回答No.2

dezimac · ベストアンサー

<img src="a.jpg" alt="×××" class="SCREEN">
<img src="b.jpg" alt="" class="PRINT">

画面用スタイルシート
.SCREEN {
display: inline;
}
.PRINT {
display: none;
}

印刷用はこれの逆

詳しくは以下参照。
http://www.tagindex.com/stylesheet/box/display.html
http://www.tagindex.com/index.html

http://allabout.co.jp/internet/hpcreate/

入門書や参考書、参考になるようなサイトを見ながらやってください。
せっかくインターネットに繋がっているのだから、Google等のサーチエンジンを活用して下さい。
いくらでも参考になる情報が見つかりますよ。

回答No.3

noname#66720

例えばこんな方法もあります。
ただし使い勝手優先で文法的には少し問題がありますが。

<style type="text/css">
p {
width:200px; /* 画像の横幅 */
height:100px; /* 画像の縦幅 */
overflow:hidden;
position:relative;
}

span {
display:block;
width:100%;
height:100%;
position:absolute; left:0; top:0;
}

@media screen {
span {
background:url(screen.gif) no-repeat 0 0; /* スクリーン時の画像 */
}
}

@media print {
span {
background:url(screen.gif) no-repeat 0 0; /* 印刷時の画像 */
}
}
</style>

<p><span></span>テキスト</p>

回答No.1

dezimac

<img src="a.jpg" alt="×××" class="SCREEN">
<img src="b.jpg" alt="" class="PRINT">
としておいて
画面用のスタイルシート（media="screen"）と印刷用スタイルシート（media="print"）で各々を表示／非表示にするようにしておいてはどうでしょう。
スタイルシートが適用されない場合は両方表示されてしまいますが。

補足

返答ありがとうございます。

>画面用のスタイルシート（media="screen"）と印刷用スタイルシート（media="print"）で各々を表示／非表示にするようにしておいてはどうでしょう。

その、「各々を表示／非表示」はどのように設定したらよいのでしょうか?それが判らず困ってます。