The Web Wizard

1
The Web Wizards 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
• ltbutton onclick"fadeText('fadingText',255,0,0)"gt
  
• Specifies final color for div with
  idfadingText
• 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.borderColo
  r "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 ltagt 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

• ltiframegt 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