1371648927 独学でウェブデザインの学習を始めたのですが、ひとつ壁にぶちあたりまして、

調べてもよくわからなかったので質問します。

画像のように、リンクにオンマウスすると、別のDivの背景画像が変わるようにしたいです。
リンクごとに切り替える背景画像を用意しています。
デザインの参考にさせていただいたのはカヤックさんのウェブデザインです。
背景に集中線がつくような動作をさせたいのです。
http://www.kayac.com/


ちなみにJavascriptに関しての知識が全くないため、
こちらのレベルを配慮していただければありがたいのです。
解決方法があまりに難しいものであっても、
教えていただければそれに向かって学習を進めていこうと思います。

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/06/26 22:40:04

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

おもしろいですね。firebugを使って覗いてみました。
http://www.kayac.com/js/index.js
// fukidashi hoverと// fukidashi resizeあたり。


追記:
http://jsfiddle.net/Rkz6X/

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>
    var imgs = [
      'http://www.st-hatena.com/users/um/uma666/profile_l.gif',
      'http://q.hatena.ne.jp/images/logo_question.png',
      'http://q.hatena.ne.jp/images/badge-recepting.gif',
      'http://q.hatena.ne.jp/images/answer-button.gif'
    ];
    $(function() {
      $('.box').hover(function() {
        $('.mainContents').css({'background-image': 'url(' + imgs[$('.mainContents .box').index(this)] + ')'});
      });
    });
  </script>
  <style>
  .mainContents {
    width: 300px;
    height: 300px;
    border: 2px solid pink;
  }
  .mainContents .box {
    float: left;
    border: 2px solid red;
  }
  </style>
</head>
<body>
  <div class="mainContents">
    <div class="box">リンク</div>
    <div class="box">リンク</div>
    <div class="box">リンク</div>
    <div class="box">リンク</div>
  </div>
</body>
</html>
他3件のコメントを見る
id:Cherenkov
$('#の後ろにid名').hover(function() {
  $('.mainContents').css({'background-image': 'url(' + '画像URL' + ')'});
});

これが1セットで、吹出しの分だけ増やせばいいんじゃないすかね。

2013/06/20 00:20:23
id:uma666

理解が及ばず申し訳ありません・・・。その方法で突破できそうです。がんばってみます。最後までお付き合いいだたきありがとうございました!

2013/06/20 00:22:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません