THE HAM MEDIA BLOG

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の書き方にあわせないと背景が消えてしまう事態にもなるので気をつけよう。