ホームページのhover部分の印刷について

ホームページの画像の部分をhoverを使って、画像切り替えしているところがあります。
当然、その部分は印刷されないのですが、hoverなしの画像の状態で印刷したいと思っ
ております。
このような場合、どのような処理にすれば、screen上ではhoverがきき、印刷もされるよ
うに出来るのでしょうか。

以下は現在のソースです

【HTML】
<div class="header">
<a href="./" id="hogehoge">Top</a>
</div>

【CSS】
a#hogehoge {
display: block;
width: 900px;
height: 210px;
text-indent: -1000px;
background-image: url("../images/main/img_header.jpg");
}
a#hogehoge:hover {
background-position: bottom left;
}

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/03/26 19:08

具体的な例を

<div class="header">
　<h1>ページタイトル</h1>
　<p class="goTop"><a href="/">トップへ</a></a>
・・・
</div>
だったとします。A要素はブロックに入ります。<div>だと文法的には合致していますが、文書構造上はおかしいので・・
p.goTop{
width:900px;height:210px;
position:absolute;top:0;left:0;
}
div.header h1{
margin-top:210px;
}
p.goTop a{
display: block;
width: 100%;height:100%;
background-image: url("../images/main/img_header.jpg") top left no-repeat;
text-indent:10em;
overflow:hidden;
}
p.goTop a:hover {
background-position:bottom left;
}
・・・
@media print{
p.goTop a:before{
content:url("../images/main/img_header_bottom.jpg");
position:absolute;top:0;left:0;
}
}

以上、試してません

　なお、リキッドデザインで中央に表示したいならpを配置した後、a要素を内部でmargin:0 autoですかね。

No.2 回答者： ORUKA1951 回答日時： 2013/03/26 15:24

＞back-groundで設定しているため、画像が消えてしまうので、どの様にすれば、表示できるかと思っております。

　背景はブラウザの印刷設定で背景を印刷を選択すれば良いのですが、そうすると印刷したくない背景まで印刷されてしまいます。
　特にmedia="screen"で背景黒、前景白の設定しにしていて、印刷が想定されるページにはprintメディア用のスタイルシートが必要です。
　背景のサイズが印刷用になっていないとうまく行きませんが、内容の追加プロパティを利用します。(:before,:after擬似要素--詳細度はタイプセレクタと同じです)と組み合わせて、position:relativeで配置すれば良いでしょう。
　示されたスプライトを使う場合は、その画像では不可能だと思います。表示したい部分を切り取った画像を用意すると良いでしょう。

　なお、a#hogehogeは、ちょっと・・いちいちa要素にidをつけるとHTML/CSSの変更が出来なくなり、
・HTMLは文書構造だけ記述するのでシンプル
・スタイルシートを書き換えるだけでデザインを変えられる
　という最大の利点を失うことになります。
a[href="/]:hover{background-image:url() left bottm;}
印刷用
a[href="/"]:before{content:url();position:absolute;top:0;left:0;z-index:-10;}
とか・・

No.1 回答者： ORUKA1951 回答日時： 2013/03/26 12:32

単純にmedia="print"

のスタイルシートを書けば良いだけですが・・・
私の例ですが
<link rel="stylesheet" type="text/css" href="./styleSheet/Preferred.css">
<link rel="stylesheet" type="text/css" media="screen,projection,tv" href="./styleSheet/screen.css">
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/HightCont.css" title="ハイコントラスト">
<link rel="styleSheet" type="text/css" media="print,handheld" href="./styleSheet/print.css">
とか・・・
@media screen{screen用のスタイルシート}
@media print{印刷用スタイルシート}
とか・・に分けても良いでしょう。

　screen用のスタイルシートとprint用のスタイルシートは、本来別物です。ブラウザが持つデフォルトのスタイルシートも異なるように・・印刷を想定されるページには、必ず印刷用スタイルシートを用意しておきましょう。
[例]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　表示メニュー→スタイルシートで色々なスタイルシートが適用できますが、どれを選択しても印刷には不向きです。印刷用は[印刷プレビュー]で見たらわかるように、URLまで印刷されます。

この回答への補足

早速のご回答有難うございます。
おっしゃる通り、print用のcssを書けばよいのは分かっているのですが、ソースにあるようなhoverの部分をどのように書けばよいのかわからず、質問しました。

back-groundで設定しているため、画像が消えてしまうので、どの様にすれば、表示できるかと思っております。

補足日時：2013/03/26 14:29