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

http://developer.netscape.com/docs/manuals/javascript.html

 

http://developer.netscape.com/docs/manuals/communicator/dynhtml/content.htm

 


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="this.style.color = 'red';" onmouseout="this.style.color =  'blue';">
 Mouse over this text 
</h3>

produces

 

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="showMe1.style.display='';"><font face="arial,helvetica" size="2">Soups</font></h3>
		<div id="showMe1" style="display: none">
			<ul>
				<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>
			</ul>
		</div>
		<h3 onclick="showMe2.style.display='';"><font face="arial,helvetica" size="2">Specials</font></h3>
		<div id="showMe2" style="display:none">
			<ul>
				<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>
			</ul>
		</div>
		<h3 onclick="showMe3.style.display='';"><font face="arial,helvetica" size="2">Nuts</font></h3>
		<div id="showMe3" style="display:none">
			<ul>
				<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>
			</ul>
		</div>

Soup.html


Example 3
: Positioning Objects Dynamically

<div  style="position:relative;"
onclick="this.style.left=100">
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

<html>
<head>
<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";  
				start=start+step; 
				setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);
		}	       
	}
}
//-->
</script>
</head>
<body background="../images/guideback.gif" bgcolor=#000000 text="dddddd" onload="expandText('expand',-10,10,1,30);">
<div align=center>
<img src="../images/guide.gif">
</div>
<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.
<p>
</body>
</html>

Expanding.html


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