Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Firefox Friendly Code

    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

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

    Code:
    <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

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    I see. Thank you very much.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •