アナログ時計


右のような感じになります。(Netscape4以上, IE4以上)
下のソースの赤い所を変えると時計の大きさが変わります。
もちろんそれに応じた大きさの画像を用意する必要があります。
画像は、
文字盤:"clockbg.gif" 縦100*横100
時針():"clockho.gif" 縦20*横20
分針():"clockmo.gif" 縦15*横15
秒針():"clockso.gif" 縦10*横10
をHTMLファイルと同じフォルダに置いて使用しています。
下のソースの青い所を変えると表示される位置が変わります。

ブラウザのバージョンが古いと表示されません。(エラーもでません・・・多分)
<余談> たくさんのレイヤーを並べて直線を表してみました。表示の更新が1秒ごとなので20枚程度の レイヤーを使っても重くはないとは思うけど、どうでしょうか。絵は見ての通りMSペイントによるものです。お子さま的絵なのは分かってます。 使うときはちゃんとした絵に描き直して。
ソース(ちょっと長いですね・・・)

<HTML>
<HEAD>
<SCRIPT>
<!--

i=0; TID=10; i2=0; ww=500;

with(navigator){ // ブラウザのバージョンチェック }

function setTOP(Mylay,y){ // レイヤー上位置 }

function setLEFT(Mylay,x){ // レイヤー左位置 }

function setBGCOLOR(layName,color){ // 背景色 }

function setBGIMG(layName,image){ // 背景画像 }

function Clock3(){ }

function init(){ }

//-->
</SCRIPT>

<STYLE TYPE="text/css">
<!--

.bb { position:absolute; top:-100; left:-100; width:3; height:3; clip:rect(0,3,3,0); }

#bg { position:absolute; top:-100; left:-100; width:100; height:100; clip:rect(0,100,100,0); }
#ho { position:absolute; top:-100; left:-100; width:20; height:20; clip:rect(0,20,20,0); }
#mo { position:absolute; top:-100; left:-100; width:15; height:15; clip:rect(0,15,15,0); }
#so { position:absolute; top:-100; left:-100; width:10; height:10; clip:rect(0,10,10,0); }

<!---->
</STYLE>

</HEAD>
<BODY BGCOLOR=#ffdddd onLoad="init();">

********
ここの間に表示させる文字やタグを書く
********


<DIV ID="bg"></DIV><DIV ID="ho"></DIV>
<DIV ID="mo"></DIV><DIV ID="so"></DIV>

<DIV CLASS="bb" ID="h1"></DIV><DIV CLASS="bb" ID="h2"></DIV><DIV CLASS="bb" ID="h3"></DIV>
<DIV CLASS="bb" ID="h4"></DIV><DIV CLASS="bb" ID="h5"></DIV><DIV CLASS="bb" ID="h6"></DIV>

<DIV CLASS="bb" ID="m1"></DIV><DIV CLASS="bb" ID="m2"></DIV><DIV CLASS="bb" ID="m3"></DIV>
<DIV CLASS="bb" ID="m4"></DIV><DIV CLASS="bb" ID="m5"></DIV><DIV CLASS="bb" ID="m6"></DIV>
<DIV CLASS="bb" ID="m7"></DIV><DIV CLASS="bb" ID="m8"></DIV><DIV CLASS="bb" ID="m9"></DIV>

<IMG SRC="clockho.gif" WIDTH=1 HEIGHT=1>
<IMG SRC="clockmo.gif" WIDTH=1 HEIGHT=1>
<IMG SRC="clockso.gif" WIDTH=1 HEIGHT=1>

</BODY></HTML>

BACK