I've just set up a page that utilizes a write() function to turn on and off text display - the point being that I need various text descriptions to appear next to fullsized images by clicking on a thumbnail image of the same picture above it.
Here's the code:
The problem is that, although this works great in IE, Netscape and other browsers seem to have problems with it. Is there a way to get this feature cross-platform?
To see it in action, click here. NOTE: Only the first two thumbnails on the top are currently assigned the code.
I'm also trying to modify the code to turn off all descriptions that were previously turned on, but I'm not a programmer. There's got to be an easier way than listing all the div ID tags one by one in the image's onclick event.
Any help much appreciated! Thanks!
- theAntic
Here's the code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>thumbs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
//Graphic Images
var imageA = new Array();
imageA[0] = "images/IMAGE-GG.jpg";
imageA[1] = "images/IMAGE-GN.jpg";
imageA[2] = "images/IMAGE-USAGrant.jpg";
imageA[3] = "images/IMAGE-eDream.jpg";
imageA[4] = "images/IMAGE-oyo-new.jpg";
imageA[5] = "images/IMAGE-bulletspeed-new.jpg";
imageA[6] = "images/IMAGE-synergy-new.jpg";
imageA[7] = "images/IMAGE-ewrmain.jpg";
imageA[8] = "images/Robot.jpg";
with (document)
{
write("<STYLE TYPE='text/css'>");
if (navigator.appName == 'Microsoft Internet Explorer')
{
write(".HiliteOff {display:none}");
write(".HiliteOn {display:block}");
}
write("H1.blurb {font-family: verdana;color: #626262;font-size: 10pt;}");
write("</STYLE>");
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onClick="newImageover(0)"><img src="images/THUMB-GG.jpg" border="0" onClick="TEXT1.className = 'HiliteOn',TEXT2.className = 'HiliteOff'"></a></td>
<td><a href="#" onclick="newImageover(1)"><img src="images/THUMB-GN.jpg" border="0" onclick="TEXT2.className = 'HiliteOn',TEXT1.className = 'HiliteOff'"></a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="630">
<td height="80" valign="top">
<DIV CLASS="HiliteOff" ID="TEXT1"></B>
<H1 CLASS="blurb">GOVERNMENT GRANT GURUS</H3><P class="P1">
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="TEXT2"></B>
<H1 CLASS="blurb">GURUS NETWORK</H3><P class="P1">
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>
</td>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img name="newImage" src="images/CENTER-graphics.jpg"></td>
</tr>
</table>
</body>
</html>The problem is that, although this works great in IE, Netscape and other browsers seem to have problems with it. Is there a way to get this feature cross-platform?
To see it in action, click here. NOTE: Only the first two thumbnails on the top are currently assigned the code.
I'm also trying to modify the code to turn off all descriptions that were previously turned on, but I'm not a programmer. There's got to be an easier way than listing all the div ID tags one by one in the image's onclick event.
Any help much appreciated! Thanks!
- theAntic
www.etoddt.com