Kid Radd ©2003 by Dan Miller

As you can see by dragging the scroll bar, there are three different tables. But when you click on the links, it appears that there is only one table, whose picture changes when you click the links.

Click here!

Here's the code for the example above:

<center>
<table cellspacing="6" cellpadding="6" border="0">
<tr><td width="200" height="100" bgcolor="yellow" valign="middle">
<a name="p1">
<center><img width="95" height="80" src="rhead.gif"></center>
</td></tr>
<tr><td width="200" height="30" bgcolor="cyan" valign="middle">
<center><a href=#p2>Click here!</a></center>
</td></tr></table>

 

<table cellspacing="6" cellpadding="6" border="0">
<tr><td width="200" height="100" bgcolor="yellow" valign="middle">
<a name="p2">
<center><img width="95" height="80" src="rheadjoy.gif"></center>
</td></tr>
<tr><td width="200" height="30" bgcolor="cyan" valign="middle">
<center><a href=#p3>Click here!</a></center>
</td></tr></table>

 

<table cellspacing="6" cellpadding="6" border="0">
<tr><td width="200" height="100" bgcolor="yellow" valign="middle">
<a name="p3">
<center><img width="95" height="80" src="rheadwow.gif"></center>
</td></tr>
<tr><td width="200" height="30" bgcolor="cyan" valign="middle">
<center><a href=#p1>Click here!</a></center>
</td></tr></table>
</center>

You can complete the illusion by putting the page within a frameset that disables the scrollbar, ex:

<HTML>
<FRAMESET ROWS="50%,310,50%" border="0">
<FRAME src="blankpage.htm" frameborder="0" noresize scrolling="no" marginheight="0" marginwidth="0" name="top;>
<FRAME src="mainpage.htm#p1" frameborder="0" noresize scrolling="no" marginheight="0" marginwidth="0" name="middle">
<FRAME src="blankpage.htm" frameborder="0" noresize scrolling="no" marginheight="0" marginwidth="0" name="bottom">
</FRAMESET>
</HTML>

So using that type of viewer was part of the answer I needed, but not quite the whole answer to my problem. I knew that to have an animation that would "begin" when you reached a certain panel, javascript would be needed.

Click here to continue:

...