Web Analytics Made Easy -
StatCounter Broken script for gallery - please help - CodingForum

Announcement

Collapse
No announcement yet.

Broken script for gallery - please help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Broken script for gallery - please help

    Hello, I have been working on a page that includes an onclick gallery. I learned this technique from the book "DOM scripting" and it seems like it should do what I need it to do, but it is not working. What it is supposed to do is have a block of thumbnails that you can click on that changes the image to the right and also a descriptive text below. For some reason the "return false" is not working as it just opens the image when it is clicked. Also the "GetElementById" dosen't seem to work. It is supposed to take the title from the thumnail and turn it into text below the gallery. The page I am working on is here: http://www.timelessurns.com/handmade3.html

    This is the JS code I am using:

    Code:
    function showPic(whichPic) {
      var source = whichPic.getAtrribute("href");
       var placeholder = document.getElementById("placeholder");
       placeholder.setAtrribute("src",source); 
       var text = whichpic.getAtrribute("title");
       var description = document.getElementById("description"); description.firstChild.nodeValue = text;
      }
    The elements of the HTML that are relative are the <head>, the thumnail, the gallery and the text. Here are those parts:

    Code:
    <head>
      <meta http-equiv="content-type"
     content="text/html; charset=ISO-8859-1">
      <title>Handmade Ceramic Urns</title>
      <meta content="Jason Earrame" name="author">
      <script type="text/javascript" src="js_files/showpic.js"></script>
      <script type="javascript" src="js_files/hide-n-load.js"></script>
      <link rel="stylesheet" href="css/hm_layout"
     type="text/css">
    </head>
    thumbnails:
    Code:
    <div id="t1"><a
     href="timeless_urn/midsize_pics/t_121.jpg"
     onclick="showPic(this); return false;"
     title="urn #1 sale price $2000"><img
     style="border: 0px solid ; width: 82px; height: 110px;"
     alt="timeless urns" src="timeless_urn/thumbs/t121.jpg"></a></div>
    <div id="t2"><a
     href="timeless_urn/midsize_pics/cr_124.jpg"
     onclick="return false; showPic(this);"
     title="urn #2 sale price $3000">
    <img style="border: 0px solid ; width: 82px; height: 110px;"
     alt="timeless urns" src="timeless_urn/thumbs/cr124.jpg"></a></div>
    Gallery and text:

    Code:
    <a><img id="placeholder"
     src="timeless_urn/midsize_pics/t_121.jpg" alt="default photo">
    </a>
    <p id="description">click a thumbnail</p>
    Thankyou for looking into this for me,

    Jason

  • #2
    Javascript is case sensitive language
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

    Comment


    • #3
      Thank you, I looked back at my script and only saw one case descrepency between that and what is in the book. I had whichPic but the book has whichpic. I fixed that but it did not change anything. do you dee another instance where I may have made a case error?

      Jason

      Comment


      • #4
        Fixed

        Fixed it! it was a misspelling

        Comment

        Working...
        X