CIS 375—Web App Dev II DHTML

2 Introduction to DHTML _________ HTML is “a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated." DHTML is NOT a _____ standard. HTML 4.0 introduced two new important technologies: CSS DOM A _________ language allows you to control HTML elements. With DHTML, a Web page may look great in one browser and horrible in another.

3 DHTML and CSS Positioning text relative to normal positioning: h1 {position: relative; left: 10;} Positioning text absolutely (10 _____ from the left): h1 {position: absolute; left: 10;} Visibility of an element (default is “________”): h1 {visibility: hidden;} Z-index—higher indexes overlap lower indexes: h2 {z-index: 2;} Filters add special effects to text and _______: h1 {width: 100%; filter: glow;}

4 Background Effects A single image remains ______ upon scrolling: body { background-attachment: fixed; background-image: url("bulboff.gif"); background-repeat: no-repeat; }

5 DHTML and DOM The Document Object Model gives us access to every _________ in a document. The element must have the ____ attribute for the scripting language to have access. My header document.getElementById('header').style.color="red" The actual content of an element can be changed. Old header document.getElementById('header').innerHTML="New header"

6 DHTML and Event Handlers Elements can be made to change when an event occurs. Click on this text Some obvious events (see examples):examples onfocus onblur onclick ondblclick onload onmouseover onsubmit More examplesexamples