解決済み

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

  • 困ってます
  • 質問No.7339435
  • 閲覧数669
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 91% (434/473)

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

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

質問者が選んだベストアンサー

  • 回答No.2

ベストアンサー率 45% (5062/11035)

ソースは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();
}
お礼コメント
takumana20

お礼率 91% (434/473)

ありがとうございます<(_ _)>
投稿日時 - 2012-03-24 12:54:15
感謝経済

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (5062/11035)

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が書き換わってますよ。
お礼コメント
takumana20

お礼率 91% (434/473)

ありがとうございます
同じに作って試してa:hoverの切り替えではないのがわかったのですが
できないので、どうやったら同じように画像切り替えができるのでしょうか
よければそのソースを教えてください
画像を二枚つくってリンクして1枚目を表示するところまではできます。
投稿日時 - 2012-03-03 19:24:10
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ