Example Programs from chapter 9/10

Simple animation

• Example pictures for making an animation:
• circle0.gif
• circle1.gif
• circle2.gif
• circle3.gif
• ChangeImage.html.
• Programmers.html.
• Runner0.html.
• Windmill.html.
• Advertisement.html.
• AnimalAlphabet.html.
• Dribble.html.
• FatCatDancing.html.
• JumpingJacks.html.
• Pennant.html.
• RockingHorse.html.
• TrafficLight.html.

return to top of page

---

Animation with preloading and image caching

• RunnerCache0.html.
• RunnerCache1.html.
• RockingHorseCache.html.
• RockingHorseImageLoad.html.
• FatCatDancingCache.html.

return to top of page

---

Animation via changing image position

• ThreeBirds.html.
• BlizzardIE.html.
• BlizzardMaster.html.
• BlizzardNavigator.html.
• BlizzardW3C.html.
• FishTankIE.html.
• FishTankMaster.html.
• FishTankNavigator.html.
• FishTankW3C.html.
• KangarooIE.html.
• KangarooMaster.html.
• KangarooNavigator.html.
• KangarooW3C.html.

return to top of page

• OrbitIE.html.
• OrbitMaster.html.
• OrbitNavigator.html.
• OrbitW3C.html.
• PilotIE.html.
• PilotMaster.html.
• PilotNavigator.html.
• PilotW3C.html.
• RacetrackIE.html.
• RacetrackMaster.html.
• RacetrackNavigator.html.
• RacetrackW3C.html.

return to top of page

---

Advanced Animation

• catchGame.html. Try to click on the "Click me!" text (it immediately starts recording the current position of the text). The text will move away from you. This game uses events and CSS positioning.

return to top of page

---

Changing HTML tags

• thisExample.html
• StateStatistics.html.
• StatesCapitals.html.
• WebPageStat.html.
• changeTag.html.
Example of dynamically changing the values of an html element.
• changeTagFireFox.html.
Example of dynamically changing the values of an html element in Firefox. You have to use the textContent property instead of the innerText properaty.
• changeTagBoth.html.
Example of dynamically changing the values of an html element in both Firefox and other browsers. You have to use the textContent property in Firefox instead of the innerText properaty.
• changeTagIE2.html.
Another example of dynamically changing the values of an html element. Includes several different approaches to changes values that only work in Internet Explorer.
• changeTagW3C.html.
Another example of dynamically changing the values of an html element. Includes several different approaches to changes values that work in any W3C complient browser.
• addTags0.html.
An example of dynamically adding tags to an HTML page.
• addTags.html.
A more complicated example of dynamically adding tags to an HTML page.
• removeTagsDOM.html.
An example of dynamically adding tags to an HTML page.
• removeTagsIE.html.
An example of dynamically adding tags to an HTML page in IE. Turns out that IE defines the DOM heirarchy slightly different that other complient browsers.
• popOutMenuW3C.html.
An example of pop-up menus in a menu bar on the left of the page. W3C standard complient only.
• popOutMenu.html.
An example of pop-up menus in a menu bar on the left of the page. Note that I had to add a "hidden" div tag to the right of the menu bar so that I wouldn't get a mouseOut message when I went from item to item in the pop-up boxes.
• popOutMenuV2.html.
Another example of pop-up menus in a menu bar on the left of the page. This version using an onmouseover event in each item in the pop-out menu to ensure that the menu doesn't go away when you leave an item. Otherwise, when you leave an item, the item sends an onmouseout event to its enclosing tag (the div) and the menu disappears.
• slideDownMenu.html.
An example of slide-down menus in a menu bar at the top of the page. Uses CSS to position div elements on the page dynamically.
• slideDownMenuFireFox.html.
An example of slide-down menus in a menu bar at the top of the page. Uses CSS to position div elements on the page dynamically. Only designed to work in standards complient browsers like FireFox.

return to top of page

---

Last updated on 07 Nov 2008 by John Barr