Take the elevator to the top of the page!
This is a little animation I put together from an animated GIF I found online. If you are the original creater, let me know and I will be sure to give you your props! The original animated GIF had many more animated frames to it that made the motion much more fluid. I used only 3 frames. I added the words “Going Up!” to one of the frames. I then added the inline JavaScript onmouseover and onmouseout event handelers. The event occurs when the mouse pointer is moved onto an element. In this case, the image of the elevator doors. When the elevator is first moused over, the elevator doors open and once the doors are open, then the “ Going UP!” words appear. When the mouse is moved away, the events happen in reverse. Starting with the the words disappearing then the doors closing. The CSS style is inline and uses a fixed position to keep the elevator visible at all times so that access is available at any point on the page. I know the animation is jerky and I could add more frames to make it appear to operate more smoothly but that will have to wait for another rainy day!
Image and animations, right click and Save image as... to a folder on your hard drive
This is the code for the elevator link to the top of the page
<!-- place this div on the next line under the opening body tag -->
<div id="top"></div>
<!-- place this code just before the closing body tag -->
<p><a style="position:fixed; bottom:5px; right:5px;" href="#top"
onmouseover="document.images.elevator.src='images/going-up122.gif'"
onmouseout="document.images.elevator.src='images/close122.gif'" >
<img id="elevator" src="images/door122.png"
width="122" height="117" alt="elevator doors "/>
</a></p>
