Tweet
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:
The elements of the HTML that are relative are the <head>, the thumnail, the gallery and the text. Here are those parts:
thumbnails:
Gallery and text:
Thankyou for looking into this for me,
Jason
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;
}
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>
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>
Code:
<a><img id="placeholder" src="timeless_urn/midsize_pics/t_121.jpg" alt="default photo"> </a> <p id="description">click a thumbnail</p>
Jason
Comment