1 / 7

The Web Wizard’s Guide To DHTML and CSS

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

karina-holden
Download Presentation

The Web Wizard’s Guide To DHTML and CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related