CSci 220 - Lecture 24

Web Page Design

© Morris Firebaugh

I. Introduction to Dynamic HTML (DHTML)


II. Making Web Objects Dynamic

Recall the basic problem with classic stateless HTML Web pages - they are static, one-way documents


III. Document Object Model (DOM)

DHTML is based on a fundamental change in the concept of HTML "objects"


An example illustrating the DHTML concept, we can make the pizza analogy:


IV. DHTML Concept Syntax

The general procedure for applying DHTML is:


V. DHTML Examples (Requires IE4.0 or greater)

Example 1: DHTML to change text color

<h3  onmouseover=" = 'red';" onmouseout=" =  'blue';">
 Mouse over this text 



Mouse over this text


Example 2: Hiding and Showing Content

<h1><font face="arial,helvetica" size="2">Soup 2 Nuts</font></h1>
		<p><font face="arial,helvetica" size="2">Click on the headline to see our menu options for today. </font></p>
		<h3 onclick="'';"><font face="arial,helvetica" size="2">Soups</font></h3>
		<div id="showMe1" style="display: none">
				<li><font face="arial,helvetica" size="2">Carrot </font>
				<li><font face="arial,helvetica" size="2">Chicken Noodle </font>
				<li><font face="arial,helvetica" size="2">Alphabet </font>
		<h3 onclick="'';"><font face="arial,helvetica" size="2">Specials</font></h3>
		<div id="showMe2" style="display:none">
				<li><font face="arial,helvetica" size="2">Chicken Stir Fry </font>
				<li><font face="arial,helvetica" size="2">London Broil and Snow Peas </font>
				<li><font face="arial,helvetica" size="2">Venison Stew </font>
		<h3 onclick="'';"><font face="arial,helvetica" size="2">Nuts</font></h3>
		<div id="showMe3" style="display:none">
				<li><font face="arial,helvetica" size="2">Cashew </font>
				<li><font face="arial,helvetica" size="2">Brazil </font>
				<li><font face="arial,helvetica" size="2">Almond </font>


Example 3
: Positioning Objects Dynamically

<div  style="position:relative;"
Click anywhere in this
text to watch it move
left 100 pixels.</div>

Click anywhere in this text to watch it move left 100 pixels.

Example 4
: Special Effects - Expand text

<title>Expanding Your Mind Example</title>
<script language=JavaScript>
ie4=((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
if (ie4){
	 document.write('<link rel=stylesheet type="text/css" href="styles/dynamic.css">')
else {document.write('<link rel=stylesheet type="text/css" href="styles/dynamicNS.css">')}
function expandText(which, start, finish, step, speed){       
	if (ie4){
 		if (start < finish){      	   
				document.all(which).style.letterSpacing = start+"px";  
<body background="../images/guideback.gif" bgcolor=#000000 text="dddddd" onload="expandText('expand',-10,10,1,30);">
<div align=center>
<img src="../images/guide.gif">
<h1>Expand <span id=expand>Your Mind</span></h1>
<p><font face="arial,helvetica" size=-1>Note: You need an IE 4.0 or newer browser to see this effect. 
You can see it again by reloading the page.


Example 5
: Z-Depth Ordering, using CSS-P Style Sheet

The code:

<img height="42" width="140" src="SyllabiOn.gif" style="z-index: 1">
<img height="42" width="140" src="SyllabiOff.gif" style="z-index: 2;
position: relative;top:15px;left:-90px">

whereas the code:

<img height="42" width="140" src="SyllabiOn.gif" style="z-index: 2">
<img height="42" width="140" src="SyllabiOff.gif" style="z-index: 1;
position: relative;top:15px;left:-90px">

For the IE challenged (i.e., benighted NetScape users) these are displayed, respectively, as

VI. Laboratory

Assignment # 12  

Updated 4/12/2000