1. The Web Wizard’s Guide To DHTML and CSS
Chapter 7
Using Dynamic Techniques

2. Chapter Objectives Modify font size and color dynamically
Modify text border style and color dynamically
Improve appearance and responsiveness of lists
Work dynamically with images
Load external content in an inline frame

3. Modifying Font Size and Color Dynamically
Complex text effects without Flash
Any CSS font property can be changed
Style sheet sets initial color of text to white
<button onclick="fadeText('fadingText',255,0,0);">
Specifies final color for div with id=“fadingText”
fadeIn() function makes small changes to size and color every 35 milliseconds

4. Modifying Border Style and Color Dynamically
CSS values for border color, border style, border width, and background color
document.getElementById('myText').style.borderColor = "red green yellow blue";
Easily create ugly effects

5. Creating Dynamic Lists
Replace standard bullet with custom image
Change image on mouseover

6. Replacing Images with Dynamic HTML
Old way - event handlers in <a> tag
New way - event handlers in any tag
Load all images in stacked divs
Change stacking order to show desired image
Combine with Dynamic List effect

7. Using an Inline Frame to Load External Content
<iframe> tag creates inline frame
Can be positioned anywhere on the page
Works in newer browsers only
Change src attribute of iframe to load new content
Simple link with target attribute also works