Introducing DHTML

Goals Understand the concept of DHTML as a tool for creating dynamic content Understand how to use DOM properties to make changes in the appearance of HTML objects Understand how to create and use objects not explicitly created by HTML

DHTML: Unlocking the Mystery DHTML is not HTML DHTML is not a programming language DHTML is a programming model for designing Web pages that incorporates: ◦ JavaScript ◦ DOM ◦ CSS ◦ HTML

DHTML vs. HTML HTML Static Limited I/O Little Interactivity DHTML Dynamic Changes elements with changes in the environment Relies heavily on interactivity

DHTML Rules of Thumb For use with 4.x versions of the browsers Some DHTML scripts can be browser- dependent: ◦ Some versions of image swapping ◦ Hover for anchor tags

Image Swapping Most common use of DHTML Changing an image’s HTML properties (specified in HTML script) by copying the properties of a DOM object (specified in a JavaScript) Tip: ◦ Always assign a name to images using the HTML … tag!

Image Swapping Example 1 Simplest approach to swapping Assigns a source value to an object which is a DOM reference to an object created in HTML Problem: New images need to be download from the Server

Image Swapping Example 2 Local download of images References the source of an existing object created via HTML

Image Swapping Example 3 Create a Stand-Alone DOM Object Create references to the sources of the new object

Image Swapping using Mouse Events We can modify different mouse events attached to DOM objects to perform image swaps: ◦ onMouseOver() ◦ onMouseOut() ◦ onMouseDown() ◦ onMouseUp()

Mouse Event Example 1 Same function as before Mouse events are attached to an HTML anchor tag (for universality)

Mouse Event Example 2 Pre-load images Create three images for each tag: ◦ MouseOver/MouseUp image ◦ MouseDown Image ◦ MouseOut Image Mouse events are attached to an HTML anchor tag (for universality)

Mouse Event Example 3 Same idea as before However, mouse events are attached to image objects Will only work in MSIE 4+ and Navigator 6

Mouse Event Example 4 Will only work in NN 3+ and IE 4+ Uses the Document.Images Property & the eval() function.

Slideshow Example Uses an HTML-set image placeholder Uses functions to increment or decrement based on array values

Animation Example Uses an HTML-set image placeholder “Animates” using a combination of a for loop and an if structure Uses the setInterval() and clearInterval() functions.

Questions?

Resources Harris, Andrew. N341 Lecture Notes. Heinle, Nick & Bill Peña, Designing with JavaScript: Creating Dynamic Web Pages, 2 nd Edition. O’Reilly (2002).