写真に触れてみてください。
写真にカーソルがさわったら動き始め、離れると止まります。NN3.0,IE4.0から使えます。
応用:ここで使っている写真はわずか3枚(止まっているのが1枚と動いてるのが2枚)だけです。たとえば、あっかんべーを繰り返す(^^;とか写真を取り替えて使って下さい。
参照: オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), function, var, src, if( ){ }else{ }, clearTimeout(), setTimeout(), document.images[], onMouseOver, onMouseOut,
写真に触れてみてください。
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
TID1 = 0 //タイマー用変数
flg = 0 //画像スイッチ
//イメージの事前読み込み
if(document.images)
{
movimg=new Array()
movimg[0] = new Image();movimg[0].src='CHOZU0.GIF';
movimg[1] = new Image();movimg[1].src='CHOZU1.GIF';
movimg[2] = new Image();movimg[2].src='CHOZU2.GIF';
}
//アニメーション
function MOV()
{
if( flg ) flg=0 //flgが1なら0に変更する
else flg=1 //flgが0なら1に変更する
//画像書き換え
document.images['view'].src=movimg[flg].src;
clearTimeout(TID1);
TID1=setTimeout('MOV()',30);
}
function STP(imgName)
{
document.images['view'].src=movimg[2].src;
clearTimeout(TID1);
}
//-->
</script>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onMouseOver="if(document.images)MOV()"
onMouseOut="if(document.images)STP()">
<img src="CHOZU2.GIF" name="view" border="0"><p></a>
写真に触れてみてください。
</body>
</html>
K01の説明も参照してくださいTID=setTimeout('命令',30)で30/1000秒後に命令を実行します
clearTimeout(TID)はTID=setTimeout('命令',30)で実行されているタイマーをキャンセル(命令の実行を中止)します
onMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です
onMouseOut="命令文"でマウスが離れたら"命令文"を実行するという意味です
a href="javascript:命令文"でもクリックしたら"命令文"を実行するという意味ですが
ここではfunction voi(){}という 中味のない voi()という関数を作って から、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されていますが、2.0などではエラーになるのでこの方法にしました使用している画像:
CHOZU0.GIF
CHOZU1.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)