The Web Wizard’s Guide To DHTML and CSS

Chapter 7

Using Dynamic Techniques

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

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

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

Creating Dynamic Lists

• Replace standard bullet with custom image

• Change image on mouseover

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

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