this may be the coolest thing you will ever see lol

delerium · #1 (**permalink**) 01-17-04, 03:14 AM

if you want something that really catches the eye, use SMIL. you can embed it into the html. nothing needs to be downloaded by the user to run it. as far as i know, IE 5 and above support this. it will give you a very smooth transition. i will give you an example (this example is long and can be confusing since i stripped out a great deal of the code not pertaining to this question. It took me several days to develop this, so if your gonna use it for money...give a shout out to me lol)

<html xmlns:smil="urn:schemas-microsoft-com:time">
<style>
.time{ behavior: url(#default#time2);}
smil\:* { behavior:url(#default#time2)}
time:* { behavior:url(#default#time2)}
body { background-color:black;color:white;font-family:verdana;font-size:10pt; }

</style>
</head>

<body>



<DIV STYLE="position:absolute; top:65; right:0;">
<smil:par begin="test.click" end="test1.click;test2.click;end.click;" >
<smil:animateMotion begin="0" dur="1" targetElement="test1"
values="0,0;0,75" fill="hold"/>
<smil:animateMotion begin="0" dur="1" targetElement="test2"
values="0,0;0,75" fill="hold"/>
<smil:animateMotion begin="0" dur="1" targetElement="end"
values="0,0;0,75" fill="hold"/>
</smil:par>
<div style="position:relative;top:65;right:0;width:0"id ="test" >
<img src="gif/test.gif" width="128" height="79"></a>
</div>
</div>


<DIV STYLE="position:absolute; top:144; right:0; ">
<smil:par begin="test1.click" end="test.click;test2.click;end.click" >
<smil:animateMotion begin="0" dur="1" targetElement="test2"
values="0,0;0,100" fill="hold" />
<smil:animateMotion begin="0" dur="1" targetElement="end"
values="0,0;0,100" fill="hold" />
</smil:par>
<div style="position:relative;top:65;right:0;width:0"id ="test1">
<img src="gif/test2.gif" width="128" height="79" >
</div>
</div>



<DIV STYLE="position:absolute; top:210; right:0; z-index:-2;">
<div CLASS=time end="test1.click;test2.click;test3.click" begin="test.click" style="width:100;height:75;
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr=black, EndColorStr=#333399);font-size:12pt;">
<font color="white" >

<div id="hide" ONCLICK="loadomniaFrame()" onmouseover="this.style.color='#0099FF'" onmouseout=" this.style.background='', this.style.color=''">
<b STYLE="cursor: default"> Choice 1 </b>
</div>
<div id="hide1" ONCLICK="loadmuntarFrame()" onmouseover="this.style.color='#0099FF'" onmouseout=" this.style.background='', this.style.color=''">
<b STYLE="cursor: default">choice 2</b>
</div>
<div id="hide12" ONCLICK="loadexFrame()" onmouseover="this.style.color='#0099FF'" onmouseout="this.style.background='', this.style.color=''">
<b STYLE="cursor: default">choice 3 </b>
</div>
</font>
</div>
</div>
<DIV ID="overlay" STYLE="position:absolute; visibility:hidden; top:212; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
<DIV ID="overlay1" STYLE="position:absolute; visibility:hidden; top:230; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
<DIV ID="overlay12" STYLE="position:absolute; visibility:hidden; top:255; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
</body>
</html>
----------------------------------------------------
also, you will need to supply your own images. if you have any problems with this, let me know.
another way is to use styles. its not as impressive but does work. goto www.webmonkey.com for a tutorial on that. hope you like
--delerium