CIS 375

1
CIS 375Web 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-indexhigher 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
• ltheadgt
• ltstylegt
• body
• background-attachment fixed
• background-image url("bulboff.gif")
• background-repeat no-repeat
• lt/stylegt
• lt/headgt

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.
• lth1 id"header"gtMy headerlt/h1gt
• ltscript type"text/javascript"gt
• document.getElementById('header').style.color
  "red"
• lt/scriptgt
• The actual content of an element can be changed.
• lth1 id"header"gtOld headerlt/h1gt
• ltscript type"text/javascript"gt
• document.getElementById('header').innerHTML"New
  header"
• lt/scriptgt

6
DHTML and Event Handlers

• Elements can be made to change when an event
  occurs.
• lth1 onclick"style.color'red'"gtClick on this
  textlt/h1gt
• Some obvious events (see examples)
• onfocus
• onblur
• onclick
• ondblclick
• onload
• onmouseover
• onsubmit
• More examples