jQuery attr()を使って、img要素の属性を操作します。サンプルの右側が［操作対象の画像］です。初期の画像をalt付きで指定しています。この画像に対して、サンプル左側の［操作メニュー］の01から05までが画像の変更で、クリックすると、aタグの hrefを読込み、［操作対象の画像］のsrcに書き込み、aタグのtitle属性を読込み、［操作対象の画像］のaltとtitleに書き込んでいます。画像にカーソルを乗せると、変更されたtitle属性が確認できます。なお、01は初期の画像と同じものですので、他の操作無しで最初にクリックしても、変化は見えません。また、「altの内容」は動作の確認用です。
$(".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;
})
altの内容
［］
［操作メニュー］の06から08までは、クリックすると［操作対象の画像］のwidth属性を変更します。09のみ、attr()ではなく、toggleClass()を使って、class属性を変更しています。クリックすると画像のボーダーを赤色と元の黄色とで交互に切り替えます。
$('#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');
});