|
窓の中の風景をクリックしてみて下さい。風景が変わります。
これは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
|