【jQuery】imgタグのsrcを書き換えて画像を変更する

imgタグのsrcを書き換えて別の画像を表示する処理はサイトを制作する上でよく使用します。クリックでボタンのアイコンを変更したり、数秒置きに切り替えたり、ウィンドウサイズに応じて出力する画像を変更したり……。

毎回同じ処理ではないですが、imgタグのsrcを書き換えて別の画像にする処理は大変便利ですので、こちらの記事でご紹介したいと思います！

jQueryを読み込む

jQueryを利用するために、GoogleのCDNを利用してファイルを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

上記のスクリプトをheadタグ内に記述することで、jQueryを読み込むことができます。

attrで属性の値を設定／取得する

attrはattribute（属性）の略で、指定した属性の値を設定／取得するメソッドになります。

属性の値を取得するには、

$('selector').attr('name');

と記述します。

実際の要素を指定して上記スクリプトを実行すると、selectorが持っているname属性の値を取得することができます。

また、attrで属性に値を設定する場合は、

$('selector').attr('name','value');

と記述します。

上記を実行すると、selectorが持っているnameという属性の値を、attrの引数2で指定したvalueの値で上書きすることができます。

imgのsrcの書き換えは上記のattrを使用して行います。

imgのsrcをattrで書き換える

下記は、imgのsrcをattrで書き換えるデモになります！

See the Pen Attr Src Image | jQuery by ryohei (@intotheprogram) on CodePen.

上記のデモは、下記のHTMLで設定しているimgタグのsrcをボタンをクリックすることで書き換えています。

HTML

<div class="image">
  <img src="//into-the-program.com/demo/images/sample001.jpg" alt="サンプル">
</div>

スクリプトは下記のようになっています。

JS

$(window).on('load',function(){
  $('button').on('click', function(){
    $('.image').children('img').attr('src', '//into-the-program.com/demo/images/sample002.jpg');
  });
});

上記の記述でimgのsrcを書き換えることができます。実際にsrcの書き換えを実行しているのは3行目の箇所です。もし、imgタグに直接クラスを定義する場合は.children()は必要ないので外してご利用いただければと思います。

imgのsrcを一部だけ書き換える

上記ではsrcをすべて書き換える方法をご紹介しましたが、すべてではなく、一部だけ書き換えたい場合もありますよね！そういうときは下記のように記述しましょう。

$(window).on('load',function(){
  $('button').on('click', function(){
    var src = $('.image').children('img').attr('src').replace('001', '002'); //現在のimgからsrcを取得し、一部を書き換える
    $('.image').children('img').attr('src', src); //書き換えたsrcをimgタグに設定する
  });
});

//このスクリプトを実行すると、下記の001の部分が002に変更されます
// into-the-program.com/demo/images/sample001.jpg

srcの一部を変更するというのはとても便利で、連続番号で管理している画像ファイルや、ロールオーバー時に使用する際のon、offの切り替えに有用です！連続番号のファイル切り替えはあまりないかもしれませんが、ロールオーバーはボタン等で頻繁に利用されると思いますので、さっそく制作中のWebサイトに取り入れてみてはいかがでしょうか！

以上、imgタグのsrcを書き換えて画像を変更するのご紹介でした！最後まで読んでいただきありがとうございました！