THE HAM MEDIA BLOG

jQuery:マウスオーバーやクリックで背景画像を入れ替えてみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
javascript
jquery
背景

jQuery:マウスオーバーやクリックで背景画像を入れ替えてみる

jQueryを使って、マウスオーバーやクリックをしたときに、
背景画像を変更するという案件が入りそうだったので、
実験的に作ってみました。

マウスオーバーしたときや、クリックした時に、
背景の画像が変わります。

jQueryを使えば基本的な事だけでできることです。



背景画像が変わるサンプル

とりあえず作ってみたのでサンプルをみてください。
サンプルのソースは重要部分だけ抜粋してのせておきます。

■ HTML

<div id="content">
<ul>
<li><a href="images01.jpg"><img src="m_images01.jpg" alt="背景" /></a></li>
<li><a href="images02.jpg"><img src="m_images02.jpg" alt="背景" /></a></li>
<li><a href="images03.jpg"><img src="m_images03.jpg" alt="背景" /></a></li>
<li><a href="images04.jpg"><img src="m_images04.jpg" alt="背景" /></a></li>
</ul>
</div>

■ スクリプト(マウスオーバー)

$(function(){
    $('ul li a').click(function(){
        return false;
    });
    $('ul li a').mouseover(function(){
        var bglink = $(this).attr("href");
        $("div#content")
         .css("background-image","url("+bglink+")");
    });
});

■ スクリプト(クリック)

$(function(){
    $('ul li a').click(function(){
        var bglink = $(this).attr("href");
        $("div#content")
         .css("background-image","url("+bglink+")");
         return false;
    });
});

■ サンプルデモ

今回の仕組みは簡単で、マウスオーバーやクリックした部分のリンクを取得し、
そのリンクのURLをそのまま背景のURLにしてしまうというだけ。

注意が一つ、CSSの設定時に、
background: url(image01.jpg) no-repeat 0 0;
このように、backgroundを一つにまとめた場合、
JavaScriptでもまとめて指定をしなければいけないということ。

今回のはまとめずに分離させて作っているので、
background-colorで書いている。
CSSの書き方にあわせないと背景が消えてしまう事態にもなるので気をつけよう。



この記事へのコメント
参考にさせていただきました。
ありがとうございます^^
Posted by Yokokawa at 2010年04月06日
func[t]ionがfunc[r]ion になってます
カスタマイズして動かないと悩んでたらコピペが違ってたとは・・
Posted by 通りすがり at 2011年02月18日
利用させて頂ければと思考錯誤しているのですが、
マウスオーバーで背景画像変更、クリックでURLへジャンプと
両方する事は不可能なのでしょうか?

お解りになられるのであれば、ぜひご教示ください。
Posted by Moon at 2011年06月16日
いつも参考にさせていただいております。
この記事のマウスオーバーの方でマウスアウトで
最初の#contentに書かれている背景画像に戻すというのは
可能でしょうか?

よろしければご返答の程よろしくお願いいたします。

Masafumi
Posted by Masafumi at 2012年07月29日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。