Firefox Friendly Code

Fasil

02-06-2007, 05:37 PM

I am trying to make a simple photo gallery that allows the user to click on a thumbnail to show the picture at the bottom. The following code works well in IE, but not in Firefox (I assume it doesn't work in Netscape either). I was hoping you could tell me how to get it to work in most browsers. Most of it works except changing the target of "toplink" when a thumbnail is clicked. I would also appreciate any general suggestions as well (other than using a photoblogging software).

To see the website in it's entirety go to www.nealranch.com

<body>
<p align="center">
<table border="0" cellspacing="0" cellpadding="0" width="800">
<tr>
<td valign="top" align="left" width="600" height="150">
<p>Below are pictures of the scenery at our ranch.<br>
Click on the thumbnails to show the full size picture at the bottom.<br>
You may also click on the bottom picture to open it by itself.<br>
NOTE: If your browser does not support scripts, then the thumbnails will open the pictures instead.</p>
<p><a href="welcome.html">Home</a> ← Click to go back to the home page.</p>
</td>
<td valign="top" align="right" width="200" height="150">
<img border="0" src="NEALRANCH.GIF" width="150" height="106">
</td>
</tr>
<tr>
<td valign="top" align="center" width="800" colspan="2">
<a href="SceneryA01.jpg" onclick="return false;"><img name="pic01" border="0" src="SceneryA01T.jpg" onclick="pic0.src='SceneryA01.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA01.jpg'" height="75"></a>
<a href="SceneryA02.jpg" onclick="return false;"><img name="pic02" border="0" src="SceneryA02T.jpg" onclick="pic0.src='SceneryA02.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA02.jpg'" height="75"></a>
<a href="SceneryA03.jpg" onclick="return false;"><img name="pic03" border="0" src="SceneryA03T.jpg" onclick="pic0.src='SceneryA03.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA03.jpg'" height="75"></a>
<a href="SceneryA04.jpg" onclick="return false;"><img name="pic04" border="0" src="SceneryA04T.jpg" onclick="pic0.src='SceneryA04.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA04.jpg'" height="75"></a>
<a href="SceneryA05.jpg" onclick="return false;"><img name="pic05" border="0" src="SceneryA05T.jpg" onclick="pic0.src='SceneryA05.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA05.jpg'" height="75"></a>
<a href="SceneryA06.jpg" onclick="return false;"><img name="pic06" border="0" src="SceneryA06T.jpg" onclick="pic0.src='SceneryA06.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA06.jpg'" height="75"></a>
<a href="SceneryA07.jpg" onclick="return false;"><img name="pic07" border="0" src="SceneryA07T.jpg" onclick="pic0.src='SceneryA07.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA07.jpg'" height="75"></a>
<a href="SceneryA08.jpg" onclick="return false;"><img name="pic08" border="0" src="SceneryA08T.jpg" onclick="pic0.src='SceneryA08.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA08.jpg'" height="75"></a>
<a href="SceneryA09.jpg" onclick="return false;"><img name="pic09" border="0" src="SceneryA09T.jpg" onclick="pic0.src='SceneryA09.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA09.jpg'" height="75"></a>
<a href="SceneryA10.jpg" onclick="return false;"><img name="pic10" border="0" src="SceneryA10T.jpg" onclick="pic0.src='SceneryA10.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA10.jpg'" height="75"></a>
<a href="SceneryA11.jpg" onclick="return false;"><img name="pic11" border="0" src="SceneryA11T.jpg" onclick="pic0.src='SceneryA11.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA11.jpg'" height="75"></a>
<a href="SceneryA12.jpg" onclick="return false;"><img name="pic12" border="0" src="SceneryA12T.jpg" onclick="pic0.src='SceneryA12.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA12.jpg'" height="75"></a>
<a href="SceneryA13.jpg" onclick="return false;"><img name="pic13" border="0" src="SceneryA13T.jpg" onclick="pic0.src='SceneryA13.jpg'; pic0.width=336; pic0.height=448; toplink.href='SceneryA13.jpg'" height="75"></a>
<a href="SceneryA14.jpg" onclick="return false;"><img name="pic14" border="0" src="SceneryA14T.jpg" onclick="pic0.src='SceneryA14.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA14.jpg'" height="75"></a>
<a href="SceneryA15.jpg" onclick="return false;"><img name="pic15" border="0" src="SceneryA15T.jpg" onclick="pic0.src='SceneryA15.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA15.jpg'" height="75"></a>
<a href="SceneryA16.jpg" onclick="return false;"><img name="pic16" border="0" src="SceneryA16T.jpg" onclick="pic0.src='SceneryA16.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA16.jpg'" height="75"></a>
<a href="SceneryA17.jpg" onclick="return false;"><img name="pic17" border="0" src="SceneryA17T.jpg" onclick="pic0.src='SceneryA17.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA17.jpg'" height="75"></a>
<a href="SceneryA18.jpg" onclick="return false;"><img name="pic18" border="0" src="SceneryA18T.jpg" onclick="pic0.src='SceneryA18.jpg'; pic0.width=640; pic0.height=480; toplink.href='SceneryA18.jpg'" height="75"></a>
</td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800" height="500">
<tr>
<td valign="middle" align="center" width="800" height="500" colspan="4">
<a name="toplink" href="SceneryA01.jpg"><img name="pic0" border="0" src="SceneryA01.jpg" width="640" height="480"></a>
</td>
</tr>
</table>
</p>
</body>

david_kw

02-06-2007, 06:56 PM

Try using document.getElementById('id') instead of the element name for your onclick code. Firefox seems to have problems directly addressing the names of the elements (which is non-standard so shouldn't be surprising).

For example, in your Gallery 1 you have this code. Try making the 4 changes in red (I didn't test it so look for typos).

<html>
<head>
<meta http-e7uiv="Content-Language" content="en-us">
<meta http-e7uiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Gallery 1 - Aoudad Pictures</title>
</head>

<body>
<p align="center">
<table border="0" cellspacing="0" cellpadding="0" width="800">
<tr>
<td valign="top" align="left" width="600" height="150">
<p>Below are pictures of aoudads at our ranch.<br>
Click on the thumbnails to show the full size picture at the bottom.<br>
You may also click on the bottom picture to open it in a new window.<br>
NOTE: If your browser does not support scripts, then the thumbnails will open the pictures instead.</p>
<p><a href="welcome.html">Home</a> ← Click to go back to the home page.</p>
</td>
<td valign="top" align="right" width="200" height="150">
<img border="0" src="NEALRANCH.GIF" width="150" height="106">
</td>
</tr>
<tr>
<td valign="top" align="center" width="800" colspan="2">
<a href="Aoudad01.jpg" onclick="return false;"><img name="pic01" border="0" src="Aoudad01T.jpg" onclick="var p=document.getElementById('pic0'); p.src='Aoudad01.jpg'; p.width=640; p.height=480; document.getElementById('toplink').href='Aoudad01.jpg'" height="75"></a>
<a href="Aoudad02.jpg" onclick="return false;"><img name="pic02" border="0" src="Aoudad02T.jpg" onclick="var p=document.getElementById('pic0'); p.src='Aoudad02.jpg'; p.width=640; p.height=480; document.getElementById('toplink').href='Aoudad02.jpg'" height="75"></a>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="800" height="500">
<tr>
<td valign="middle" align="center" width="800" height="500" colspan="4">
<a name="toplink" id="toplink" href="Aoudad01.jpg"><img name="pic0" id="pic0" border="0" src="Aoudad01.jpg" width="640" height="480"></a>
</td>
</tr>
</table>
</body>
</html>

That should help assuming there are no other problems.

david_kw

Fasil

02-08-2007, 04:41 AM

I noticed that the webpage works in Firefox without using document.getElementByID("ID"), and I only need to change the "name" tags to "ID". What is the benefit of using document.getElementById?

david_kw

02-08-2007, 06:36 AM

Compatibility. That is the "right" way to do it. Obviously you can use whatever works for you, but don't be surprised if some browser specific feature doesn't work in every other browser (including different platforms and versions).

david_kw

Fasil

02-08-2007, 03:37 PM

I see. Thank you very much.