Dynamic HTML with Sizzling HTML Jalfrezi

Dynamic HTML »

• Introduction
• Changing the appearance of links
• Changing images with the mouse (rollovers)
• Expanding/collapsing outlines
• Image rollover with text display
• DHTML References

Introduction to Dynamic HTML

Dynamic HTML gives web authors the opportunity to change the look and content of their pages, without connecting to a server and loading more information. What this gives the user is the ability to painlessly interact with the pages to help and aid their use of the web site. The kind of applications often included, and described here, include images that change when moved over or click upon; collapsing and reopening menus; pop-up tool tip boxes and highlighting of page sections.

Sounds good? Well there's a catch. With a few exceptions, dynamic HTML must be programmed differently for different browsers. Dynamic HTML does not just use HTML, it relies heavily on JavaScript and in particular style sheets. Dynamic HTML is only really supported by version 4 browsers, although a few effects are supported by version 3, such as image rollovers. Dynamic HTML tends to be much simpler to program for Microsoft Internet Explorer (MSIE) as it more thoroughly embraces the W3C document object model, on which DHTML is based. Where possible I've tried to provide a Netscape alternative, failing that you'll usually find an external link explaining the more complicated Netscape version.

A word of warning: Dynamic HTML is a much more complicated subject than pure HTML. While you should be able to just cut and paste the examples, I recommend you make sure you are familiar with HTML and style sheets.

If you cannot find what you are looking for here, try the Tips and Tricks JavaScript section or the Tip of the Day archive.

Changing the appearance of links

You can make the appearance of links change when you move the mouse over them. If you are using MSIE you will have noticed links in Jalfrezi highlight when you move the mouse over them, and brighten when clicked upon. This effect is attained purely through the use of style sheets.

<HEAD>
<TITLE>Dynamic HTML Example</TITLE>
<STYLE TYPE="text/css">
<!--
A:link		{color: #400080}
A:visited	{color: #C40000}
A:active	{background-color: #FFFFFF;
		 text-decoration: underline}
A:hover		{background-color: #FFFFE8;
		 text-decoration: underline}
-->
</STYLE>
</HEAD>

A link to the style sheets section

In the above example, the hover style is part of W3C: Cascading Style Sheets, level 2, and is supported by MSIE4 upwards but not Navigator 4.

Changing images with the mouse

On web sites throughout the Internet you will have seen the effect whereby a link image changes when you move the mouse over it. This was an early application of DHTML (before the term was thought up) and will work with Netscape Navigator 3 and MSIE 3 upwards.

Firstly you need to create two images to be your links - an inactive image and an active image, the active image being that which is displayed when the mouse moves over the graphic. Then you need to insert the following JavaScript into the <HEAD> of your document. This example will show how to incorporate 2 rollover images in the same script.

<HEAD>
<TITLE>Dynamic HTML Example</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--//
if (document.images) {
	img1on = new Image();           // Active images
	img1on.src = "graphics/frankon.jpg";  
	img2on = new Image();
	img2on.src = "graphics/pulpon.jpg";  
	img1off = new Image();          // Inactive images
	img1off.src = "graphics/frankoff.jpg"; 
	img2off = new Image();
	img2off.src = "graphics/pulpoff.jpg"; 
  }
    function imgOn(imgName) {
            if (document.images) {
                document[imgName].src = eval(imgName + "on.src");
            }
    }
    function imgOff(imgName) {
            if (document.images) {
                document[imgName].src = eval(imgName + "off.src");        
            }
    }
//-->
</SCRIPT>
</HEAD>

Now we need to display the images on the page and tell the JavaScript code that the cursor is on top of the image. To distinguish between the images, each one is assigned a unique NAME attribute.

<A HREF="#images" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><IMG NAME="img2" BORDER=0 HEIGHT=25 WIDTH=90 SRC="graphics/pulpoff.jpg" ALT="[city]"></A> <BR> <A HREF="#images" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"><IMG NAME="img1" BORDER=0 HEIGHT=25 WIDTH=90 SRC="graphics/frankoff.jpg" ALT="[happy]"></A>

More detail on the image rollover effect can be found at Webreview.

Expanding/collapsing outlines

A good way of saving space on a page is to hide the majority of content, giving readers the option to display only that text which they require. This example uses the style sheet display attribute and the JavaScript onClick method, and is supported by MSIE4 upwards, but not Netscape Navigator 4.

Firstly you need to insert the following JavaScript code into the <HEAD> of your document. This example will show how to incorporate any number of collapsable outlines with the same script.

<HEAD>
<TITLE>Dynamic HTML Example</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- // hide from old browsers

// hide text from MSIE browsers

with (document)
{
	write("<STYLE TYPE='text/css'>");
	if (navigator.appName == 'Microsoft Internet Explorer')
		{
		write(".hiddentext {display:none}  .outline {cursor:hand; text-decoration:underline}");
		}
	write("</STYLE>");
}

// show text on click for MSIE browsers

function expandIt(whichEl)
{
	if (navigator.appName == 'Microsoft Internet Explorer')
		{
		whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
		}
	else return;
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

Now we need to display place the outline and text on the page and tell the JavaScript code that the outline has been clicked upon. To distinguish between the outlines, each one is assigned a unique ID attribute.

<H4 onClick="expandIt(el1); return false" CLASS="outline">Time now for business with Collately Sisters</H4> <DIV ID="el1" CLASS="hiddentext"> <P>No let-up today for British manufacturers, there were large profit slumps for Securivadge and United Haha. Down 6.4, Joanny Collins perhaps units on a lower third rung. There was better news for Edgyledgywedgebarge, who mustered 2.41 up 88 very slightly [she smiles wryly for no reason], but Oxymacgee flew back a ninth, despite a creeping bid from Connected Breathdumps at four.</P> </DIV>

<H4 onClick="expandIt(el2); return false" CLASS="outline">Sylvester Stuart has today's weather</H4> <DIV ID="el2" CLASS="hiddentext"> <P>Starting in the southeast, where it'll be misty tomorrow with a droplet density of about 50,000 per spherical inch. That's rather as if the mist were hugging the ground like an over-affectionate and rather damp dog. Over to East Anglia and the Midlands, there'll be a warm day tomorrow, about 20, that's the sort of warmth you might feel on a January morning walking into a heated drawing room after chopping some wood. And finally, into the north of England and Scotland - a strong and highly long-lasting day tomorrow, with hail aimed down vertically from above, and there'll be a 30% chance. In summary then - breezes. And that's all the weather.</P> </DIV>

Time now for business with Collately Sisters

No let-up today for British manufacturers, there were large profit slumps for Securivadge and United Haha. Down 6.4, Joanny Collins perhaps units on a lower third rung. There was better news for Edgyledgywedgebarge, who mustered 2.41 up 88 very slightly [she smiles wryly for no reason], but Oxymacgee flew back a ninth, despite a creeping bid from Connected Breathdumps at four.

Sylvester Stuart has today's weather

Starting in the southeast, where it'll be misty tomorrow with a droplet density of about 50,000 per spherical inch. That's rather as if the mist were hugging the ground like an over-affectionate and rather damp dog. Over to East Anglia and the Midlands, there'll be a warm day tomorrow, about 20, that's the sort of warmth you might feel on a January morning walking into a heated drawing room after chopping some wood. And finally, into the north of England and Scotland - a strong and highly long-lasting day tomorrow, with hail aimed down vertically from above, and there'll be a 30% chance. In summary then - breezes. And that's all the weather.

To add more outlines, simply change the ID=eIn and expandIt(eln) attributes appropriately. More detail on expandable outlines can be found at Webreference.