関連項目⇒
フィルターmatrixを使用しています。正面、左、右、下、に画像を表示します。なお、モニター解像度1024×768
に合わせて作成しています。JavaScriptで開かれるウィンドウのサイズを固定しています。
画像をクリックすると元画像を表示します。
画像をクリックすると元画像を表示します。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>3D WebPAGE</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{margin: 0;overflow:hidden;}
DIV,IMG{z-index:-1;}
-->
</STYLE>
</HEAD>
<BODY>
<!--正面の画像-->
<A href="image1.jpg"><IMG src="image1.jpg" border="0" style="width:600;height:400;position:absolute;top:10;left:210;z-index:-1;"></A>
<!--正面ここまで-->
<!--底面となるページ-->
<A href="image2.jpg"><IMG src="image2.jpg" border="0" style="position:absolute;left:0;top:395;width:750;height:280;z-index:-2;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.4,M12=0,M21=0,M22=.7,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></A>
<!--底面ここまで-->
<!--向かって右側のページ-->
<A href="image3.jpg"><IMG src="image3.jpg" border="0" style="position:absolute;left:810;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></A>
<!--右側ここまで-->
<!--向かって左側のページ-->
<DIV style="position:absolute;left:2;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');">
<A href="image4.jpg"><IMG src="image4.jpg" border="0" style="width:350;height:350;filter:flipH;"></A>
</DIV>
<!--左側ここまで-->
</BODY>
</HTML>
<HEAD>
<TITLE>3D WebPAGE</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{margin: 0;overflow:hidden;}
DIV,IMG{z-index:-1;}
-->
</STYLE>
</HEAD>
<BODY>
<!--正面の画像-->
<A href="image1.jpg"><IMG src="image1.jpg" border="0" style="width:600;height:400;position:absolute;top:10;left:210;z-index:-1;"></A>
<!--正面ここまで-->
<!--底面となるページ-->
<A href="image2.jpg"><IMG src="image2.jpg" border="0" style="position:absolute;left:0;top:395;width:750;height:280;z-index:-2;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.4,M12=0,M21=0,M22=.7,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></A>
<!--底面ここまで-->
<!--向かって右側のページ-->
<A href="image3.jpg"><IMG src="image3.jpg" border="0" style="position:absolute;left:810;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></A>
<!--右側ここまで-->
<!--向かって左側のページ-->
<DIV style="position:absolute;left:2;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');">
<A href="image4.jpg"><IMG src="image4.jpg" border="0" style="width:350;height:350;filter:flipH;"></A>
</DIV>
<!--左側ここまで-->
</BODY>
</HTML>