人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

独学でウェブデザインの学習を始めたのですが、ひとつ壁にぶちあたりまして、
調べてもよくわからなかったので質問します。

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


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

よろしくお願いします。

1371648927
●拡大する

●質問者: mmmmmmmmm
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
ベストアンサー

おもしろいですね。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>

mmmmmmmmmさんのコメント
プログラムを確認できるツールがあるのですね、そういった手段は思いつきませんでした・・・。ありがとうございます。参考にさせていただきます!

Cherenkovさんのコメント
適当にサンプル書いてみました。画像のURLをどう持ちたいのか、コンテンツ部分の構造をどうしたいのかでまったく変わってきますが一例として。

mmmmmmmmmさんのコメント
ありがとうございます!確認してみましたが動作はこちらが求めているものとばっちりでした。ただぼくはそれぞれのdivにIDを降って、marginの数値を指定し、微妙に位置を変えています。お手数ですがこの場合どうすればよいのかも教えていただければ非常に助かります。最初の説明が足りなかったので、さらに参考画像を用意しました。 https://skydrive.live.com/redir?resid=1653E9FAC24BF425!356&authkey=!AOxwqSjaAEaV5Uo ただここまで解説していただき、学習の方向性が見えましたので大収穫です。

Cherenkovさんのコメント
>|javascript| $('#の後ろにid名').hover(function() { $('.mainContents').css({'background-image': 'url(' + '画像URL' + ')'}); }); ||< これが1セットで、吹出しの分だけ増やせばいいんじゃないすかね。

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ