画像を交互に入れ替える (title属性を利用して入れ替える)

説明

画像を交互に入れ替えるには、いくつかの方法があります。ここではimgタグのtitle属性を利用して画像を入れ替えます。title属性に入れ替える画像のURLを指定しておきます。プログラムではsrcプロパティとtitleプロパティの内容を交互に入れ替えます。これにより表示される画像が交互に切り替わることになります。定期的に画像を入れ替える処理を行わせるためにsetInterval()を使います。この手法は入れ替える画像が変わってもプログラムを修正する必要がないのがメリットになります。

サンプルプログラム

window.onload = function(){
setInterval("swapPhoto()", 1000);
}
// 画像を交互に入れ替えるための関数
function swapPhoto(){
var imgObj = document.getElementById("photo01");
var temp = imgObj.src;
imgObj.src = imgObj.title;
imgObj.title = temp;
}
サンプルを実行
[戻る]