Advanced DHTML, Dynamic CSS

Animating an object

• Take a look at script to move an object from corner to corner

• You should have the basic idea from the tractor script shown earlier

Other actions

• Move in a circle

• Follow the pointer

• Draggable objects

• Simple popup windows (this could be useful); these are also behaviors in Dreamweaver.

• Move window

• Resize it

Changing Styles

• There is one example here that changes text size. Note – Object.style[stylename] = newVal

• Other options here are reading styles from the sheet, and changing classes.

• A more complete switcher changes the whole style sheet (also consider <link type="text/css" rel="alternate stylesheet" href="other.css"/> which still must be called in the page)

Using alternate stylesheets

• Here's a script from alistapart.com that makes sure that other stylesheets are disabled, and that stores the style's status in a cookie– styleswitcher.js

• Create alternate stylesheets with titles (no title for the original stylesheet)– <link rel="alternate stylesheet" title="fred" href="fred.css"/>

• Connect to the script below the stylesheets– <script type="text/javascript" src="styleswitcher.js"></script>

• Add event handlers– <a href="#" onclick="setActiveStyleSheet ('fred'); return false;">Choose

Fred</a>

• The original article is here.