調べてもよくわからなかったので質問します。
画像のように、リンクにオンマウスすると、別のDivの背景画像が変わるようにしたいです。
リンクごとに切り替える背景画像を用意しています。
デザインの参考にさせていただいたのはカヤックさんのウェブデザインです。
背景に集中線がつくような動作をさせたいのです。
http://www.kayac.com/
ちなみにJavascriptに関しての知識が全くないため、
こちらのレベルを配慮していただければありがたいのです。
解決方法があまりに難しいものであっても、
教えていただければそれに向かって学習を進めていこうと思います。
よろしくお願いします。
おもしろいですね。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>
これが1セットで、吹出しの分だけ増やせばいいんじゃないすかね。
2013/06/20 00:20:23理解が及ばず申し訳ありません・・・。その方法で突破できそうです。がんばってみます。最後までお付き合いいだたきありがとうございました!
2013/06/20 00:22:39