「文字や画像を動かす。その１」では、文字を動かしましたが、もちろん画像も動かせます。
前回のソースをもう一度書きます。（このソースについては
こちら参照）
<html>
<head>
<SCRIPT Language="JavaScript">
<!--
var k=0;
function gyahaha(){
if (k % 2 == 0){document.all.wahaha.style.pixelLeft = 30;}
if (k % 2 == 1){document.all.wahaha.style.pixelLeft = 22;}
k = k + 1;
timer1ID=setTimeout("gyahaha()",20);
}
//-->
</SCRIPT>
</head>
<body>
では、早速、下の”笑い”と書いた部分にマウスカーソルを当ててみてください。<br>
<span id="wahaha"
onMouseover="gyahaha()" onMouseout="clearTimeout(timer1ID)"
style="font-family:TT-JTCナミキPOP-M;
font-size:32pt;color:red;position:relative;left:22px;top:1px">
笑い
</span><br>
</body>
</html>
|
これを、文字ではなく画像に変えるには、
”笑い”と書かれたところを、画像に変えればＯＫ！
つまり、文字ではなくｉｍｇタグに変えます。
そして、スタイルシートの部分は、文字について設定した部分が必要なくなります。
font-family:TT-JTCナミキPOP-M字の種類、
font-size:32pt字の大きさ、
color:red字の色が、必要ありません。
そして、ちょこっと文章も変えて、このようになります。
<html>
<head>
<SCRIPT Language="JavaScript">
<!--
var k=0;
function gyahaha(){
if (k % 2 == 0){document.all.wahaha.style.pixelLeft = 30;}
if (k % 2 == 1){document.all.wahaha.style.pixelLeft = 22;}
k = k + 1;
timer1ID=setTimeout("gyahaha()",20);
}
//-->
</SCRIPT>
</head>
<body>
では、下の絵にマウスカーソルを当ててみてください。<br>
<span id="wahaha"
onMouseover="gyahaha()" onMouseout="clearTimeout(timer1ID)"
style="position:relative;left:22px;top:1px">
<img src="pic/anitanita.png" width="50" height="50" border="0">
</span><br>
</body>
</html>
|
では、下の絵にマウスカーソルを当ててみてください。
ＪＡＶＡスクリプトの部分は、前のページのものと全く同じです。
<span>〜</span>の中が文字から画像に変わっただけです。
（ｉｍｇタグについては
こちら参照）
◆
そして、この
<span>〜</span>タグの中には、このように文字を入れたり、画像を示すｉｍｇタグを入れたりするほかに、別のものも入れられます。
例えば、テーブルタグなどを入れてみるとどうなるか？
| １ | ２ | ３ | ４ |
| ５ | ６ | ７ | ８ |
| ９ | １０ | １１ | １２ |
| １３ | １４ | １５ | １６ |
マウスカーソルを当ててみてください。
このように、文字、画像、そしてＨＴＭＬのタグを
<span>〜</span>で囲んで、動かすことが出来ます。
さて、いつまでもブルブルするだけじゃ、飽きてくるので、次からは他の動きをやってみましょう。