テレビのリモコンにマウスを乗せると猫が移動し、
クリックで、テレビのオン/オフ
|
|
|
テレビ画面の横スクロール
#screen {
background: url(mountain.jpg);
}
| mountain.jpg |
| ↓ |
 |
|
スタイルシートで、mountain.jpg を screenに設定 |
|
<body onload="TVset()"> |
ソース読込み完了した時点、
自動的にTVset()を発生
|
var Xscreen = 0;
function TVset() {
var backscreen = document.getElementById("screen");
backscreen.style.backgroundPosition = Xscreen+ "px " + 0 + "px";
Xscreen += 2;
if(Xscreen > 1024) Xscreen = 0;
setTimeout("TVset();", 120);
} |
mountain.jpgを変数backscreenに変換しbackscreenの位置を
setTimeout("TVset();", 120);で、1/120秒ごとに2pxずつ右方向に加算し
1024px以上になったら0に戻す
|
<div id="screen" style="position:absolute;width:63;height:40;top:32px;
left:37px;"> |
TV.gifの位置<div style=position:relative;top:0px; left:0px;">を基点にし
id="screen"(mountain.jpg)の位置を top:32px;left:37px; を設定
それぞれの画像を配置するrelativeの解説
|
|
カラスの横スクロール
<MARQUEE scrolldelay="350" loop="0" direction="left" width="66"
behavior="scroll"> |
tori.gifの画像を
MARQUEEタグ
で移動 | scrolldelay | =移動スピード |
| loop | =繰り返す回数/無制限は0 |
| direction | =移動方向 |
| width | =移動する幅 |
|
テレビリモコンの設定
|
<a href="#a" onclick="TV()" onmouseover="huu()"> |
| クリックでTV()を読み込む ↓ |
function TV(){
if(TVoff.style.visibility =="hidden"){
TVoff.style.visibility = "visible";
}else{
TVoff.style.visibility = "hidden";
}
}
|
id="TVoff"で設定した TVoff.gif の画
像がhidden(非表示）なら表示
|
| ↓マウスオーバーでhuu()を読み込む |
function huu(){
if(terebi.style.visibility =="hidden"){
terebi.style.visibility = "visible";
}else{
terebi.style.visibility = "hidden";
}
}
|
id="terebi"で設定した TVoff.gif
shadow2.jpgの画像がhidden(非表示）
なら表示、visible(表示)ならhidden
テレビに近づいた画像 TV-hu.gif も
hiddenならvisible 又は
visibleならhiddenの同じ動作
|
|
|
|
