ボタンなどをクリックしたときに表示されている画像を切り替えるためには、imgタグのsrc属性のファイル名を変更します。

これをjQueryで行う場合には、imgタグのclickイベントの中で、src属性の指定を変更することで実現が可能です。

clickイベントでは、無名関数の「function(){…}」を利用すると記述が簡単になります。クリックイベントの記述は、次のようになります。

$(function() {
  $("<タグ名").click( 
    function() {
      タグに対する変更
  });
});

タグの属性を変更する場合は、attrメソッドを使い、「attr("属性名","値")」のように指定します。

リスト1では、imgタグに「img1」という名前を付けておいて、クリックしたときに画像を切り替えています。