0017

jQueryを使って画像切り替え

jQueryを使って画像切り替え

2011.1.10

jQueryを使って画像切り替えをする方法をメモしておきます。

はじめに

img_switch.html







画像切り替え



画像切り替え


ポイントをいくつか記載します。

img_switch.js

$(function(){
    //画像1の文字をクリックしたら、img_switchの中にある画像をimg01.pngに変える    
    $("#menu01").click(function(){
        $("#img_switch img").attr("src", "img/img01.png");
    });

    //画像2の文字をクリックしたら、img_switchの中にある画像をimg02.pngに変える    
    $("#menu02").click(function(){
        $("#img_switch img").attr("src", "img/img02.png");
    });

    //画像3の文字をクリックしたら、img_switchの中にある画像をimg03.pngに変える    
    $("#menu03").click(function(){
        $("#img_switch img").attr("src", "img/img03.png");
    });
});

特に記載すべき事もないかな。コメント通りに動作しています。

似たような記述を3回も書いているのは若干スマートではないですが、あまり気にしない方向でw

サンプルダウンロード

上記の実際のサンプルです。良かったらどうぞ。