SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript not working in FF

    Hello, I have validated my HTML using W3C HTML validator but my page does not work right in FireFox. What I'm trying to do is create a photo gallery where if you click on a thumbnail, a larger version of the thumb will popup on the right hand side of the screen. I have used just three thumbnails to see if it will work and it does for the most part. However, the left-most thumbnail does not work a second time after its been clicked, unless you refresh the page. The script I'm using is not my own and I am new to Javascript thus I don't fully under stand what it does. I hope you could help, thank you in advance for your time. The following is my code.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>
    </title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="description" content="" /><meta name="keywords" content="" />

    <script type="text/javascript" language="javascript">function showPic (whichpic)

    {if (document.getElementById){document.getElementById('placeholder').src = whichpic.href;

    if (whichpic.title){ document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; }

    else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; }

    return false; }
    else { return true; }}
    </script>

    <style type="text/css">
    body{background-image:url('images/Art3.jpg');background-repeat:no-repeat;}

    #desc {position:relative; top:200px; margin:128px;}
    #placeholder {position:relative; top:50px; left:500px; width:234px; height:194px;}
    div .picframe {position:relative; top:50px; left:500px;}
    </style>
    </head>

    <body>

    <div class="picframe">

    <div style="position:absolute; top:75px;left:115px;">
    <a onclick="return showPic(this)" href="images/AFRICAN.jpg" title="stuff">
    <img src="images/AFSCULPTURE.jpg" alt=""/>
    </a>
    </div>

    <div style="position:absolute; top:75px;left:262px;">
    <a onclick="return showPic(this)" href="images/AF2.gif" title="stuff">
    <img src="images/AFSCULPTURE.jpg" alt=""/></a>
    </div>

    <div style="position:absolute; top:75px;left:409px;">
    <a onclick="return showPic(this)" href="images/AF3.gif" title="stuff">
    <img src="images/AFSCULPTURE.jpg" alt=""/></a>
    </div>

    <div style="position:absolute;left:40px; top:14px;">
    <img id="placeholder" src="images/blank.gif" alt="" />
    </div>

    <p id="desc"></p>

    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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