立体的なTABLE ソース

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>立体的なTABLE</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{font-size:15pt;font-family:"MS UI Gothic";margin: 0;}
.time{behavior:url(#default#time2);color:white;position:absolute;top:350;font-weight:bolder;}
.td1{background-color:white;width : 32;height : 32;}
#a4,#a8,#a21,#a23,#a33{border-right:5 #999999 solid;border-bottom:3 #999999 solid;
border-top:none;border-left:none;}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<TABLE border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD align="center">
<div>
<TABLE border="1" cellpadding="0" cellspacing="0" style="position:relative;left:0;top:0;filter:progid:DXImageTransform.Microsoft.Matrix(M11=-.5,M12=1,Dx=0,M21=.5,M22=.3,Dy=0,FilterType='bilinear',sizingMethod='auto expand');">
<TR>
<TD class="td1" id="a1"><t:animateColor attributeName="background-color" begin="a1.mouseover" to="blue" dur="1" end="a1.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a2"><t:animateColor attributeName="background-color" begin="a2.mouseover" to="blue" dur="1" end="a2.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a3"><t:animateColor attributeName="background-color" begin="a3.mouseover" to="blue" dur="1" end="a3.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a4" style="background-color:red;" onclick="location.href='#'"><t:animateColor attributeName="background-color" begin="a4.mouseover" to="blue" dur="1" end="a4.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a5"><t:animateColor attributeName="background-color" begin="a5.mouseover" to="blue" dur="1" end="a5.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a6"><t:animateColor attributeName="background-color" begin="a6.mouseover" to="blue" dur="1" end="a6.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a7"><t:animateColor attributeName="background-color" begin="a7.mouseover" to="blue" dur="1" end="a7.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
</TR>
<TR>
<TD class="td1" id="a8" style="background-color:aqua;" onclick="location.href='#'"><t:animateColor attributeName="background-color" begin="a8.mouseover" to="blue" dur="1" end="a8.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a9"><t:animateColor attributeName="background-color" begin="a9.mouseover" to="blue" dur="1" end="a9.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a10"><t:animateColor attributeName="background-color" begin="a10.mouseover" to="blue" dur="1" end="a10.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a11"><t:animateColor attributeName="background-color" begin="a11.mouseover" to="blue" dur="1" end="a11.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a12"><t:animateColor attributeName="background-color" begin="a12.mouseover" to="blue" dur="1" end="a12.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a13"><t:animateColor attributeName="background-color" begin="a13.mouseover" to="blue" dur="1" end="a13.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a14"><t:animateColor attributeName="background-color" begin="a14.mouseover" to="blue" dur="1" end="a14.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
</TR>
<TR>
<TD class="td1" id="a15"><t:animateColor attributeName="background-color" begin="a15.mouseover" to="blue" dur="1" end="a15.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a16"><t:animateColor attributeName="background-color" begin="a16.mouseover" to="blue" dur="1" end="a16.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a17"><t:animateColor attributeName="background-color" begin="a17.mouseover" to="blue" dur="1" end="a17.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a18"><t:animateColor attributeName="background-color" begin="a18.mouseover" to="blue" dur="1" end="a18.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR>
</TD>
<TD class="td1" id="a19"><t:animateColor attributeName="background-color" begin="a19.mouseover" to="blue" dur="1" end="a19.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR>
</TD>
<TD class="td1" id="a20"><t:animateColor attributeName="background-color" begin="a20.mouseover" to="blue" dur="1" end="a20.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a21" style="background-color:#00cc00;" onclick="location.href='#'"><t:animateColor attributeName="background-color" begin="a21.mouseover" to="blue" dur="1" end="a21.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
</TR>
<TR>
<TD class="td1" id="a22"><t:animateColor attributeName="background-color" begin="a22.mouseover" to="blue" dur="1" end="a22.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a23" style="background-color:#ffff00;" onclick="location.href='#'"><t:animateColor attributeName="background-color" begin="a23.mouseover" to="blue" dur="1" end="a23.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a24"><t:animateColor attributeName="background-color" begin="a24.mouseover" to="blue" dur="1" end="a24.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a25"><t:animateColor attributeName="background-color" begin="a25.mouseover" to="blue" dur="1" end="a25.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a26"><t:animateColor attributeName="background-color" begin="a26.mouseover" to="blue" dur="1" end="a26.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a27"><t:animateColor attributeName="background-color" begin="a27.mouseover" to="blue" dur="1" end="a27.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a28"><t:animateColor attributeName="background-color" begin="a28.mouseover" to="blue" dur="1" end="a28.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
</TR>
<TR>
<TD class="td1" id="a29"><t:animateColor attributeName="background-color" begin="a29.mouseover" to="blue" dur="1" end="a29.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a30"><t:animateColor attributeName="background-color" begin="a30.mouseover" to="blue" dur="1" end="a30.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a31"><t:animateColor attributeName="background-color" begin="a31.mouseover" to="blue" dur="1" end="a31.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a32"><t:animateColor attributeName="background-color" begin="a32.mouseover" to="blue" dur="1" end="a32.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a33" style="background-color:black;" onclick="location.href='#'"><t:animateColor attributeName="background-color" begin="a33.mouseover" to="blue" dur="1" end="a33.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a34"><t:animateColor attributeName="background-color" begin="a34.mouseover" to="blue" dur="1" end="a34.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR></TD>
<TD class="td1" id="a35"><t:animateColor attributeName="background-color" begin="a35.mouseover" to="blue" dur="1" end="a35.mouseout+1" autoreverse="true" repeatcount="indefinite" /><BR>
</TD></TR></TABLE>
</div>
<DIV class="time" begin="a4.mouseover" end="a4.mouseout" timeaction="display">コンテンツ１<t:animateColor attributeName="color" begin="a4.mouseover" to="deeppink" dur=".5" end="a4.mouseout" autoreverse="true" repeatcount="indefinite" /></DIV>
<DIV class="time" begin="a8.mouseover" end="a8.mouseout" timeaction="display">コンテンツ２<t:animateColor attributeName="color" begin="a8.mouseover" to="deeppink" dur=".5" end="a8.mouseout" autoreverse="true" repeatcount="indefinite" /></DIV>
<DIV class="time" begin="a21.mouseover" end="a21.mouseout" timeaction="display">コンテンツ３<t:animateColor attributeName="color" begin="a21.mouseover" to="deeppink" dur=".5" end="a21.mouseout" autoreverse="true" repeatcount="indefinite" /></DIV>
<DIV class="time" begin="a23.mouseover" end="a23.mouseout" timeaction="display">コンテンツ４<t:animateColor attributeName="color" begin="a23.mouseover" to="deeppink" dur=".5" end="a23.mouseout" autoreverse="true" repeatcount="indefinite" /></DIV>
<DIV class="time" begin="a33.mouseover" end="a33.mouseout" timeaction="display">コンテンツ５<t:animateColor attributeName="color" begin="a33.mouseover" to="deeppink" dur=".5" end="a33.mouseout" autoreverse="true" repeatcount="indefinite" /></DIV>
</TD></TR></TABLE>
</BODY>
</HTML>