Creating a Virtual Fish Tank | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

To really illustrate how powerful scripts can be, I'm now going to show you how to dynamically move an image around on a page. One fun way to demonstrate how moving an image can be useful is to create a virtual fish tank web page in which a fish appears to swim across the page. This is made possible by using script code and CSS style properties to change the position of a fish image so that it moves around on the page.

You can use CSS styles to position images and text so that they appear in an exact location on the page. This type of positioning is known as absolute positioning, which you learned about in Hour 14, "Using Style Sheets for Page Layout." If you position an element using absolute positioning, you can easily alter its position on the page using script code. Here is an example of an image that's positioned using absolute positioning:

 <img src="/books/4/158/1/html/2/fish.gif" alt="Fish"  style="position:absolute; top:70px" />

Absolute positioning allows you to position HTML content at precise locations on a web page. Dynamic positioning involves using script code to alter the position of content after a page has already been loaded.

The fish image uses absolute positioning and will be displayed at a position 70 pixels down from its parent element; the parent element is the tag in which the <img> tag resides, such as a <p> tag or <div> tag. Notice that the image has its id attribute set to "fish". The id attribute is necessary so that script code can access the image and alter its position.

Listing 17.5 contains a sample web page that uses script code to animate the fish image by making it appear to swim across the page.

Listing 17.5. JavaScript Code Is Used to Move a Fish Image in This Virtual Fish Tank Web Page

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Virtual Fish Tank</title>     <script type="text/javascript">       <!-- Hide the script from old browsers       var fishStyle;       function StartSwimming() {         fishStyle = document.getElementById("fish").style;         fishStyle.left = document.body.offsetWidth + "px";         window.setInterval("Swim()", 75);       }       function Swim() {         var left = parseInt(fishStyle.left) - 5;         fishStyle.left = left + "px";         if (left < -118)           fishStyle.left = document.body.offsetWidth + "px";       }       // Stop hiding the script -->     </script>   </head>   <body style="background-image:url(water.jpg)" onload="StartSwimming()">     <h1 style="text-align:center">Virtual Fish Tank</h1>     <p style="text-align:center">       Welcome to the virtual fish tank, where you never have to worry about       remembering to feed the fish.       <img src="/books/4/158/1/html/2/fish.gif" alt="Fish"        style="position:absolute; top:70px" />     </p>   </body> </html>

The script code in this page sets up a timer that runs a script function again and again on a regular interval, in this case every 75 milliseconds. The script function, Swim(), decreases the left property of the image, causing it to move across the page from right to left. The left property is also checked to see whether the image has moved off the left edge of the screen, in which case it is "wrapped" back around to the right edge.

By the Way

Depending on your specific browser and browser security settings, some web pages with JavaScript may set off a security alert. Such alerts are intended to help prevent rogue scripts from causing harm to your system. As a web page developer, you can't do a whole lot about them other than maybe including a small note on your pages that lets visitors know that your pages are safe.

Figure 17.8 catches a glimpse of the fish during its swim across the page.

Figure 17.8. The Virtual Fish Tank web page shows how to dynamically change the position of an image using script code.

I didn't even mention that the fish image itself is an animated GIF, which adds considerably to the realism of the swimming effect.

I have glossed over some details in the Virtual Fish Tank sample web page, but it's another example of script code you can use in pages of your own without having to become a JavaScript expert.