home / articles / javascript

JavaScript + Dynamic HTML + MSIE4 = Cool web pages

Web pages are traditionally very limited in the way information can be presented. While the current HTML specification is sufficient for presenting static information, it is often nice to be able to create dynamic web pages that look more like interactive CD-ROMs. Thankfully, Microsoft's Dynamic HTML (DHTML) addresses some of the shortcomings of HTML. With IE4, it is possible to treat every element on a page as an object that can be moved, resized and changed at will. This makes for some interesting possibilities that are only now beginning to be explored.

Unfortunately, the version of DHTML supported in Netscape 4 is much more limited than that supported by Internet Explorer 4, so the example on this page will not work with Netscape or in any other web browsers. But the script is well worth trying out - after all, if your competitors have IE4 enhanced sites, your web site visitors may not be too impressed with your static looking pages.

If you have ever been to Microsoft's sitebuilder network then you will most likely find their DHTML documentation quite mysterious. However, help is at hand. The example on this page will show you how straightforward it is to combine JavaScript and DHTML to change the look of the web page in response to user interaction. The example uses a combination of JavaScript and DHTML to provide a small multimedia demonstration. Click on the buttons to see an appropriate image and a brief description of each fruit:

How it works:

• The image was inserted into the page using the following HTML code:

<IMG SRC="030598-fruit.jpg" ALT="Fruit Pictures" WIDTH="150" HEIGHT="100" ID="fruit_picture">

This is the standard method of including images in a web page, the only additional code is the ID tag, which gives the image object a name (fruit_picture) in order to identify it.

• Some text was added to the box below the Fruit Multimedia Presentation title text. The text was enclosed between SPAN tags:

<SPAN ID="fruit_description">Welcome to this DHTML example. Click on the buttons below for an image and a description of each fruit.</SPAN>

Note that the span of text also has an ID (fruit_description), which in this case applies to all of the text within the SPAN tags.

• The buttons have extra tags to enable a script to be run when they are clicked on:

<INPUT TYPE="button" NAME="B2" VALUE="Banana" OnClick="banana_text()">

In this case, when the button labelled Banana is clicked on, it executes the banana_text function of the JavaScript (code shown below).

• The page contains a JavaScript to control what happens when the buttons are clicked on:

<script language="JavaScript"><!--
browseversion= parseInt(navigator.appVersion);
browsetype = navigator.appName;
browsertype = "old";
if (browsetype == "Microsoft Internet Explorer" && !(browseversion < 4)) {
browsertype = "new";
}
if (browsertype == "new") {

function fruit_text() {
fruit_description.innerText = "Welcome to this DHTML example. Click on the buttons below for an image and a description of each fruit."
fruit_picture.src="030598-fruit.jpg"
}

function banana_text(){
fruit_description.innerText = "Bananas are yellow, and research has indicated that they are the favorite food of monkeys."
fruit_picture.src="030598-banana.jpg"
}

function orange_text(){
fruit_description.innerText = "Oranges grow on trees, and are the main constituent of orange juice."
fruit_picture.src="030598-orange.jpg"
}

function strawberry_text(){
fruit_description.innerText = "Strawberries are a popular fruit in the Summer months."
fruit_picture.src="030598-strawberry.jpg"
}

function tomato_text(){
fruit_description.innerText = "Tomatoes are a vital constituent of pizzas and other convenience foods."
fruit_picture.src="030598-tomato.jpg"
}

}
// --></script>

The top part of this script is some fairly standard code for making sure that the script is only executed by Internet Explorer 4.

The rest of the script contains the various functions that are carried out in response to clicking on the buttons. For example, when the button labelled Banana is clicked on, it executes the banana_text function of this script. This function does two things: it changes the fruit_description text span to display some text about the banana, thereby replacing the existing text. It also changes the image source of the image with the ID of fruit_picture.

This script can be easily modified to suit a variety of other situations. Let me know if you find an interesting use for it. Don't forget that the script only works at present with Internet Explorer 4. If you want your web site visitors to be able to check if they have the right web browser (you will be surprised at the number of people who browse the web without knowing the version of their browser) then you could use a variation of the following script:

browseversion= parseInt(navigator.appVersion);
browsetype = navigator.appName;
browsertype = "old";
if (browsetype == "Microsoft Internet Explorer" && !(browseversion < 4)) {
browsertype = "new";
}
if (browsertype == "new") {
document.write('<B>Congratulations, you are using Internet Explorer 4.</B>');
}
else {
document.write('<B>Oh dear, you are not using Internet Explorer 4.</B>');
}

Of course, if you are designing an Intranet site that will only be viewed by people using IE4, then you won't need to worry so much. Modern web servers such as Microsoft's Internet Information Server also allow you to easily serve up different pages according to the capabilities of the client browser. So you could easily build a home page enhanced for IE4, and a standard page for all other browsers.

Author: Brett Burridge
Date: 03/05/98

More articles about JavaScript
More articles by Brett Burridge
Author Biography