jQueryを使って画像切り替え

2011.1.10

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

はじめに

• テキストリンクをクリックしたら、対象の画像の中身を差し替えます。
• 2018.8　アクセスが多かったので、見やすく修正しました。

img_switch.html

画像切り替え

画像1
画像2
画像3

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

• 「どこをクリックしたか」を判断する起点を設定する必要があるので、クリックしたら反応させたいaタグにid="menu01"``、``id="menu02"``、``id="menu03"を記述しておきます。
• a``タグのテキストリンクをボタンとして代用する場合、``href``の中身がこまるので、``href="javascript:void(0);"と記載して、処理を無効にするために記載しておくのが吉です。→「[J] a タグの href に # とか javascript:void(0) とかする理由 – Jamz (Tech)」
• 切り替えたい画像を指定できるよう、idを振っておきます。ここではid="img_switch"``としました。ここでは``img``タグを``p``タグで括り、その``p``タグに対して``id``を振りましたが、``aタグに直接振っても多分大丈夫だと思います。

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回も書いているのは若干スマートではないですが、あまり気にしない方向でｗ
サンプルダウンロード
上記の実際のサンプルです。良かったらどうぞ。

img_switchダウンロード（47,154バイト）