javascript ホームページ作成にあたって 画像が自動で入れ替わる
本日は、も備忘録的な記述ですが・・・
javascript ホームページ作成にあたって 画像が自動で入れ替わるやりかた。
はじめは DATEの秒数を使って入れ替えをやろうとおもったのですが、
自動で入れ替えは出来ず・・・。 気が付くのにしばらくかかりました(汗)
画面を開いた瞬間の条件で、表示される画像が変わるだけでした・・・(単純に2の倍数か?否か?でやってみました。)残念(T T)
で・・いろいろ調べていたら、下記の方法が!
ちなみに、ファイヤーフォックスのソース検証を行うと、エラーが出てきます。
どうしても???だったので先生にお聞きしました、本来はdivが適当だそうです。が書き換えると動きが止まってしまい(汗)まぁ動くから(^^)といいよ(笑)
と言って頂きました(汗)
ちなみに、エラー内容は、『name属性はちがうのでは?』という内容のものでした。
html
<img src="img/newfresh1.png" name="SP" alt="">
<script type="text/javascript">
<!--
var no=1;
img=new Array(2);
img[1]="img/newfresh2.png";
img[2]="img/newfresh1.png";
UP();
function UP(){
setTimeout("UP()",7000);
document.SP.src=img[no];
no=no+1
if(no>2){no=1;}
}
//-->
</script>
※画面を開いた瞬間に配置されている画像。
※入れ替わる画像。
※入れ替わる間隔の秒数
※入れ替わる画像の枚数。
ちなみに、画像ですが、表情だけを変える様にしたかったので、
1枚目をイラストレータで作成 → 保存。
2枚目は、1枚目を開く → 輪郭を絶対に動かさず!表情を変更 → 名前を変更して保存。
をすると、入れ替え時に目に優しい画像ができました。