jQuery attr()を使って、img要素の属性を操作します。サンプルの右側が[操作対象の画像]です。初期の画像をalt付きで指定しています。この画像に対して、サンプル左側の[操作メニュー]の01から05までが画像の変更で、クリックすると、aタグの hrefを読込み、[操作対象の画像]のsrcに書き込み、aタグのtitle属性を読込み、[操作対象の画像]のaltとtitleに書き込んでいます。画像にカーソルを乗せると、変更されたtitle属性が確認できます。なお、01は初期の画像と同じものですので、他の操作無しで最初にクリックしても、変化は見えません。また、「altの内容」は動作の確認用です。

jQueryソース(1)

 $(".inner1 a").click(function(){
	 var alt02 = $(this).attr("title");
	 $("#test").attr("src",$(this).attr("href"));
	 $("#test").attr({"alt":alt02,"title":alt02});
	 $('#cap span').text(alt02);
	 return false;
 })

[操作メニュー]サンプル

  1. BtoB WEB受注システム 百万石
  2. 百万石 購買システム
  3. BtoB WEB受注システム 0万石
  4. 0万石 在庫照会システム
  5. QRラリーシステム
  6. 画像のwidthを200pxに
  7. 画像のwidthを150pxに
  8. 画像のwidthを元(270px)に
  9. 画像のボーダーを赤に(toggle)

[操作対象の画像]サンプル

BtoB WEB受注システム 百万石

altの内容

 

[操作メニュー]の06から08までは、クリックすると[操作対象の画像]のwidth属性を変更します。09のみ、attr()ではなく、toggleClass()を使って、class属性を変更しています。クリックすると画像のボーダーを赤色と元の黄色とで交互に切り替えます。

jQueryソース(2)

 $('#btn1').on('click', function() {
	$('#test').attr({'width':'200px'});
 });
 $('#btn2').on('click', function() {
	$('#test').attr({'width':'150px'});
 });
 $('#btn3').on('click', function() {
	$('#test').attr({'width':'270px'});
 });
 $('#btn4').on('click', function() {
 	$('#test').toggleClass('img-border2');
 });
戻るボタン