a:hoverではない画像切り替え

質問

http://www.domainking.jp/support/
このページの真ん中あたりに
オレンジ色の｛よくあるご質問｝｛お知らせ・メンテナンス情報｝ボタンがありまして
このボタンにカーソルをあてると画像がかわります。

HTMLをみてもCSSをみても普通のa:hoverではない画像切り替えのようなので
仕組みが全くわかりません　この仕組みややり方を教えてください。

回答No.2

ORUKA1951 · ベストアンサー

ソースはjqueryを使っているので、それを調べてください。
そのサイトは膨大な量のjavascriptを読み込んでいるので大変です。

　骨格は
<a href="#"><img alt="サンプルへ" width="100" height="50" src="[画像URL]"
onmouseover="this.src='[変更画像URL]';" onmouseout="this.src='[画像URL]'">
　ですが、それを別途記述しても良いでしょう。

　ただ、スタイルシートで簡単にできるものをわざわざjavascripを使うのは、あまりお勧めできません。
<div class="nav">
　<div>
　　<h2>サンプル</h2>
　　<p>説明</p>
　　<p class="link"><a href="./sample.html">サンプルへ</a></p>
　</div>
　<div>
　　<h2>説明</h2>
　　<p>説明</p>
　　<p class="link"><a href="./manual.html">説明</a></p>
　</div>
</div>

[CSS}
div.nav p.link{text-align:center;}
div.nav p.link img {
display:block;width:100px;height:50px;
line-height:50px;
}
div.nav p.link img a{
width:100%;height:100%;
background:orenge url();
}
div.nav p.link img a{
display:block;width:100px;height:50px;
line-height:50px;
background:orenge url();
}
div.nav p.link img a:visited{
background:magenta url();
}
div.nav p.link img a:hover,
div.nav p.link img a:focus{
background:yellow url();
}
div.nav p.link img a:active{
background:red url();
}

お礼

ありがとうございます<(_ _)>

回答No.1

ORUKA1951

javascriptで、
<img height="58" width="263" alt="よくあるご質問" src="/image/btn_faq02_off.gif">
のsrcの内容を/image/btn_faq02_on.gifに書き換えてますが・・・
なら、a:hoverのほうが良いですね。

　ソースを見ればわかります。
　firefox+fireBugで、該当の画像部分のHTMLソースを開いて、マウスをリンクに乗せるとHTMLが書き換わってますよ。

お礼

ありがとうございます
同じに作って試してa:hoverの切り替えではないのがわかったのですが
できないので、どうやったら同じように画像切り替えができるのでしょうか
よければそのソースを教えてください
画像を二枚つくってリンクして１枚目を表示するところまではできます。