Web Site Building · Advanced Topics · Dynamic HTML 1

What this is about:

Dynamic HTML, or DHTML, is not something that can easily be described, or separated from other web technologies. It is a group of technologies that, when tied together, enable a web developer to bring a page to life. The three main components that make up DHTML are HTML, JavaScript and Cascading Style Sheets (CSS). HTML is used for the basic structure of the document, JavaScript to manipulate the Document Object Model (DOM), and CSS to define the presentation and style of the document.

Simple Rollover Image Change

This simple two-step process involves creating two or more graphics with seamless integration, then coding the DHTML JavaScript that executes the onmouseover and onmouseout functions. Roll your mouse over the Internet Brothers logo below to observe the demonstration.

IB Logo

Besides changing the property of the original logo to another image with highlights, we've also told the mouseover function to act upon a second object. That second object transforms into the statement about FX from what was originally a totally transparent image. Essentially you are limited only by your imagination. Now let's get into the code to do this.

The first step is to pre-load the images as defined in the image1on and image1off assignments below. Pre-loading prevents your browser client from having to retrieve the image from the server during the hover process, causing an untimely delay in display of the change. Then the turnOn and turnOff script functions below switch the images when the mouseover occurs. The image2 statements control the appearance of the graphic text in the example.

Put this script in the <HEAD> section of your page.

					<script language="JavaScript">
			  		if (document.images) {
			  		image1on = new Image(); image1on.src = "iblogo120_lit.gif";
			  		image1off = new Image(); image1off.src = "iblogo120.gif";
			    		function turnOn(imageName) {
			    		if (document.images) {
			      		document[imageName].src = eval(imageName + "on.src");
				  	document["image2"].src = "text_lit.jpg"; }}
			    		function turnOff(imageName) {
			    		if (document.images) {
			      		document[imageName].src = eval(imageName + "off.src");
				  	document["image2"].src = "blank.gif"; }}
			  		// -->


Here are the table and anchor tags that activate the DHTML mouseover.

					<table border="0" align="center" width="80%">
					<tr><td align="center">
					<A HREF="#" onmouseout="turnOff('image1')"
					<IMG alt="IB Logo" border="0" height="120" name="image1"
					src="iblogo120.gif" width="120"></A></td>
					<td align="center">
					<IMG border="0" height="120" name="image2"
					src="blank.gif" width="127" align="right"></td>

The onmouseout and onmouseover attributes of the anchor tag call the turnOff and turnOn functions defined in the head script block to be executed. The # value in the href attribute merely implies don't go anywhere with this anchor, just evaluate the code. The table simply lays out the appearance of the effect on the page. Notice too the presence of the name attribute on the img src tags. They refer back to the original off condition graphics defined in the preload section.

Because the companies developing browser software can't always agree on the Document Object Model, there are forms of DHTML that haven't passed W3C standards and are termed to be propriety in nature. This is very common with Microsoft's Internet Explorer browser. We also offer some DHTML functions that unfortunately only work with Internet Explorer.

Proceed to Dynamic HTML Transitions Tutorial (IE only).

go to the next page