Style Seat

こんなこともできます

クリックすると次の風景に変わります

窓の中の風景をクリックしてみて下さい。風景が変わります。
これはJavaScriptを使って画像を変えています。
さて、ここで新しいことといえば、窓枠が写真に重なっていることでしょうか。
これはやはりStyleSeatを使用しています。
スタイルシートのポジショニングというものを利用してます。

ポジショニングとは、画像やテーブルなどの表示位置を自由に設定できる機能です。
この例の場合、風景写真、窓枠、窓の外枠の3つの画像が同じ位置にポジショニングされています。
これらを組み合わせることによって、窓から外を見ているような画像が出来上がります。
さらに風景が切り替えられるのはJavaScriptの恩恵です。
下記がこのソースです。

<SCRIPT Language="JavaScript">
<!--

// 風景を切り替えるJavaScript
 var i=0;
 function cen() {
 i=i+1;
 if(i==3){i=0;}
 document.images[0].src=i+".jpg";
 }
//-->
</SCRIPT>

<!--下は風景挿入のタグ-->
<SPAN STYLE="position:absolute; top:130; left:40; z-index:2;">
<A HREF="JavaScript:cen()">
<IMG SRC="0.jpg" BORDER="0" WIDTH="320" HEIGHT="240" ALT="クリックすると次の風景に変わります"></A>
</SPAN>

<!--下は窓外枠挿入のタグ-->
<SPAN STYLE="position:absolute; top:120; left:30; z-index:1;">
<TABLE BORDER="3" BACKGROUND="waku.jpg" WIDTH="340" HEIGHT="260">
<TR><TD> </TD></TR></TABLE>
</SPAN>

<!--下は窓枠左挿入のタグ-->
<SPAN STYLE="position:absolute; top:130; left:40; z-index:2;">
<IMG SRC="mado.gif" WIDTH="75" HEIGHT="240">
</SPAN>

<!--下は窓枠右挿入のタグ-->
<SPAN STYLE="position:absolute; top:130; left:285; z-index:2;">
<IMG SRC="mado2.gif" WIDTH="75" HEIGHT="240">
</SPAN>

TOP