Dynamic HTML with Sizzling HTML Jalfrezi

Dynamic HTML »

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

Image rollover with text display

This trick shows you how to display a piece of text by rolling the mouse over an image link. It essentially combines the principles discussed in "Changing images with the mouse" and "Expanding/collapsing outlines ", along with style sheet positioning. This method is supported by MSIE4 upwards, but not Netscape Navigator 4.

Firstly you need to insert the following JavaScript into the <HEAD> of your document. This script writes a style sheet, depending on the browser used.

<HEAD>
<TITLE>Dynamic HTML Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
with (document)
	{
	write("<STYLE TYPE='text/css'>");
	if (navigator.appName == 'Microsoft Internet Explorer')
		{
		write(".HiliteOff {display:none}");
		write(".HiliteOn {display:block}");
		}
	write("H3.blurb {font-family: trebuchet ms,sans-serif; color:#515151;}");
	write("</STYLE>");
	}
//-->
</SCRIPT>
</HEAD>

Now we need to display the image links on the page and tell the JavaScript code that the cursor is on top of the image. Each image will display a different piece of text, identified by a unique ID attribute.

<A HREF="#technical"><IMG SRC="graphics/brake.jpg" BORDER=1 WIDTH=100 HEIGHT=82 ALT="[Technical Data]" onmouseout="Technical.className='HiliteOff'" onmouseover="Technical.className = 'HiliteOn'"></A>

<A HREF="#design"><IMG SRC="graphics/cad.gif" BORDER=1 WIDTH=100 HEIGHT=82 ALT="[Design Details]" onmouseout="Design.className='HiliteOff'" onmouseover="Design.className = 'HiliteOn'"></A>

Finally we need to add the text to be displayed - note how the ID attributes relate to the onmouse properties of the images.

<DIV CLASS="HiliteOff" ID="Technical"></B><BR> <H3 CLASS="blurb"><A HREF="technical.htm">Technical Data</A></H3><P> More technical facts and figures than you ever thought existed. Structure, aerodynamics, engine, transmission & clutch, suspension, electrics, cooling & fuel system, electronics, wheels & tyres, brakes & steering, dimensions, weight & capacities. </P> </DIV>

<DIV CLASS="HiliteOff" ID="Design"></B><BR> <H3 CLASS="blurb"><A HREF="design.htm">Design</A></H3><P> All the ins and outs of the F1 design. Learn how the styling aids grip, the exhaust prevents crash damage, how the engine has such a high output, how the tyre was considered as an intrinsic suspension element and all the rest. </P> </DIV>

When the mouse is moved over an image, the style sheet CLASS of the corresponding text is changed from HiliteOff to HiliteOn. Notice form our initial JavaScript code that HiliteOff sets the display property to 'none', whereas HiliteOn sets display to 'block', thus showing the text when the image is activated.

Technical Data
More technical facts and figures than you ever thought existed. Structure, aerodynamics, engine, transmission & clutch, suspension, electrics, cooling & fuel system, electronics, wheels & tyres, brakes & steering, dimensions, weight & capacities.

Design
All the ins and outs of the F1 design. Learn how the styling aids grip, the exhaust prevents crash damage, how the engine has such a high output, how the tyre was considered as an intrinsic suspension element and all the rest.