jQueryを使って画像切り替え

jQuery

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

はじめに

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

img_switch.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/img_switch.js"></script>
<title>画像切り替え</title>
</head>
<body>

<h1>画像切り替え</h1>
<ul>
<li><a href="javascript:void(0);" id="menu01">画像1</a></li>
<li><a href="javascript:void(0);" id="menu02">画像2</a></li>
<li><a href="javascript:void(0);" id="menu03">画像3</a></li>
</ul>
<hr />

<p id="img_switch"><img src="img/img00.png" /></p>
</body>
</html>

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

  • 「どこをクリックしたか」を判断する起点を設定する必要があるので、クリックしたら反応させたい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回も書いているのは若干スマートではないですが、あまり気にしない方向でw

サンプルダウンロード

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

タイトルとURLをコピーしました