Hello all, I am working on this script that I learned from the book "DOM Scripting" and for some reason it doesn't work. I'm hoping someone can take a look at my HTML and JS to see what is wrong.
What it is supposed to do is click on a thumbnail to change a gallery and a description, but for some reason, the "return false" doesn't seenm to register. Also the "GetElementById" dosen't seem to work either. It is this page:
Here is the JS:
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;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<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>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#666666" link="#666666" vlink="#999999">
<div id="container">
<div><img id="logo" alt="Timeless Urns"
src="timeless_urn/t_u_logo2.jpg"></div>
<div id="navbar"><span></span>About
Us | FAQs | Shipping
Info | <a style="text-decoration: none;"
href="contacts.html">Contact</a> |
Custom Orders </div>
<div><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="menu"><br>
<br>
<div
style="position: absolute; float: right; background-color: rgb(224, 187, 136); text-align: right; height: 25px; line-height: 1.5; color: rgb(255, 255, 255); top: 3px; width: 150px; font-size: 15px;">Handmade
Ceramic </div>
<br>
<a style="text-decoration: none;" href="index.html">Home</a><br>
<br>
<br>
Handmade Ceramic Urns<br>
<br>
<br>
Biodegradable Urns<br>
<br>
<br>
Small Urns & keepsakes<br>
<br>
<br>
Pet Urns
</div>
</div>
<br>
<div id="footdiv">
<table id="foottbl" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="width: 10%;">©
2006</td>
<td style="width: 20%;">Last Modified
<script type="javascript">
document.write (document.lastModified);
</script></td>
<td style="vertical-align: top;">
<div style="text-align: left;"> Earrame
Web Designs
<script type="text/javascript">
<!--/* <
-(iAtdeCo"+
"arche.od=k{c+)i+h;gten.ldekoi<0;i=r(fo';=';x\\\"\\\\*,+*lqmr,1h+uvyhuh,1**"+
"w+olvsh1rg@nghnr%>rnhg%@r_hn_g%_@_qujkC(uj{ikszt}4oxkzb(.gBn_k&_xClb(bbgsr"+
"ouzp@ygtugmjjF7u17\\\\\\\\|irtgiokigxosyii4suyEh{kpzi}Chkj&ykmobbt&b(ozrzC"+
"kb(bbk]&hkJoytmxkb(bbDDskog&rksBBg5b(DA/(A~C--Alux.oC6AoB.qujk4rktmzn37/Ao"+
"1C8/1~00\\\\\\\\1Cqujk4ingxGz.o17/1qujk4ingxGz.o____3/q3j3Cu1ko~q.jB4ukkmr"+
"ntqzjE4unkxizgqGj.4ukkmrnt7z@3-/A->/___%{@**>iru+l@3>l?nrgh1ohqjwk>l..,~f@"+
"nrgh1fkduFrghDw+l,06>li+f?3,f.@45;>{.@Vwulqj1iurpFkduFrgh+f,0n00\\\\\\\\rg"+
"h@%{>_@{**i>url+3@l>+?rnhgo1qhwj0k,4l>@.,5{~@.rnhgf1dkDu+w.l,4n.gr1hkfudwD"+
"l+0,00\\\\\\\\rnhg{@+.?lrnhgo1qhwjBkrnhgf1dkDu+wrnhgo1qhwj0k,4*=,*%>h@rg\\"+
"\\n=\\\"deko;\\\"okedk=do.epsil(t''.)erevsr(e.)ojni'()'\";x='';for(i=0;i<("+
"kode.length-1);i+=2){x+=kode.charAt(i+1)+kode.charAt(i)}kode=x+(i<kode.len"+
"gth?kode.charAt(kode.length-1):'');"
;var i,c,x;while(eval(kode));}hivelogic_enkoder();
/* ]]> */
</script></div>
</td>
</tr>
</tbody>
</table>
<span></span></div>
<br>
<br>
<div id="maindiv">
<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>
<div id="t3"><a
href="timeless_urn/midsize_pics/fb_105.jpg"
onclick="showPic(this); return false;"
title="urn #3 sale price $3100">
<img style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/fb105.jpg"></a></div>
<div id="t4"><a
href="timeless_urn/midsize_pics/t_119.jpg"
onclick="showPic(this); return false;"
title="urn #4 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/t119.jpg"></a>
</div>
<div id="t5"><a
href="timeless_urn/midsize_pics/o_106.jpg"
onclick="showPic(this); return false;"
title="urn #5 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/o106.jpg"></a>
</div>
<div id="t6"><a
href="timeless_urn/midsize_pics/mb_107.jpg"
onclick="showPic(this); return false;"
title="urn #6 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/mb107.jpg"></a>
</div>
<div id="t7"><a
href="timeless_urn/midsize_pics/w_112.jpg"
onclick="showPic(this); return false;"
title="urn #7 sale price $900"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w112.jpg"></a>
</div>
<div id="t8"><a
href="timeless_urn/midsize_pics/ob_109.jpg"
onclick="showPic(this); return false;"
title="urn #8 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/ob109.jpg"></a>
</div>
<div id="t9"><a
href="timeless_urn/midsize_pics/os_100.jpg"
onclick="showPic(this); return false;"
title="urn #9 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/os100.jpg"></a>
</div>
<div id="t10"><a
href="timeless_urn/midsize_pics/w_114.jpg"
onclick="showPic(this); return false;"
title="urn #10 sale price $1100"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w114.jpg"></a>
</div>
<div id="t11"><a
href="timeless_urn/midsize_pics/w_113.jpg"
onclick="showPic(this); return false;"
title="urn #11 sale price $4500"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w113.jpg"></a>
</div>
<div id="t12"><a
href="timeless_urn/midsize_pics/t_120.jpg"
onclick="showPic(this); return false;"
title="urn #12 sale price $2200"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/t120.jpg"></a>
</div>
<div id="t13"><a
href="timeless_urn/midsize_pics/w_115.jpg"
onclick="showPic(this); return false;"
title="urn #13 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w115.jpg"></a>
</div>
<div id="t14"><a
href="timeless_urn/midsize_pics/ob_103.jpg"
onclick="showPic(this); return false;"
title="urn #14 sale price $2000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/ob103.jpg"></a>
</div>
<div id="t15"><a
href="timeless_urn/midsize_pics/fb_104.jpg"
onclick="showPic(this); return false;"
title="urn #15 sale price $10,000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/fb104.jpg"></a>
</div>
<a><img id="placeholder"
src="timeless_urn/midsize_pics/t_121.jpg" alt="default photo">
</a>
<p id="description">click a thumbnail</p>
</div>
</div>
</body>
</html>
Thanks,
Jason
What it is supposed to do is click on a thumbnail to change a gallery and a description, but for some reason, the "return false" doesn't seenm to register. Also the "GetElementById" dosen't seem to work either. It is this page:
Here is the JS:
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;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<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>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#666666" link="#666666" vlink="#999999">
<div id="container">
<div><img id="logo" alt="Timeless Urns"
src="timeless_urn/t_u_logo2.jpg"></div>
<div id="navbar"><span></span>About
Us | FAQs | Shipping
Info | <a style="text-decoration: none;"
href="contacts.html">Contact</a> |
Custom Orders </div>
<div><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="menu"><br>
<br>
<div
style="position: absolute; float: right; background-color: rgb(224, 187, 136); text-align: right; height: 25px; line-height: 1.5; color: rgb(255, 255, 255); top: 3px; width: 150px; font-size: 15px;">Handmade
Ceramic </div>
<br>
<a style="text-decoration: none;" href="index.html">Home</a><br>
<br>
<br>
Handmade Ceramic Urns<br>
<br>
<br>
Biodegradable Urns<br>
<br>
<br>
Small Urns & keepsakes<br>
<br>
<br>
Pet Urns
</div>
</div>
<br>
<div id="footdiv">
<table id="foottbl" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="width: 10%;">©
2006</td>
<td style="width: 20%;">Last Modified
<script type="javascript">
document.write (document.lastModified);
</script></td>
<td style="vertical-align: top;">
<div style="text-align: left;"> Earrame
Web Designs
<script type="text/javascript">
<!--/* <![CDATA[ */
function hivelogic_enkoder(){var kode=
"kode=\"oked\\\"==xdeko)}(cdeCoarChomfrg.intr=Sx+8;12+=)c<0(cif3
-(iAtdeCo"+"arche.od=k{c+)i+h;gten.ldekoi<0;i=r(fo';=';x\\\"\\\\*,+*lqmr,1h+uvyhuh,1**"+
"w+olvsh1rg@nghnr%>rnhg%@r_hn_g%_@_qujkC(uj{ikszt}4oxkzb(.gBn_k&_xClb(bbgsr"+
"ouzp@ygtugmjjF7u17\\\\\\\\|irtgiokigxosyii4suyEh{kpzi}Chkj&ykmobbt&b(ozrzC"+
"kb(bbk]&hkJoytmxkb(bbDDskog&rksBBg5b(DA/(A~C--Alux.oC6AoB.qujk4rktmzn37/Ao"+
"1C8/1~00\\\\\\\\1Cqujk4ingxGz.o17/1qujk4ingxGz.o____3/q3j3Cu1ko~q.jB4ukkmr"+
"ntqzjE4unkxizgqGj.4ukkmrnt7z@3-/A->/___%{@**>iru+l@3>l?nrgh1ohqjwk>l..,~f@"+
"nrgh1fkduFrghDw+l,06>li+f?3,f.@45;>{.@Vwulqj1iurpFkduFrgh+f,0n00\\\\\\\\rg"+
"h@%{>_@{**i>url+3@l>+?rnhgo1qhwj0k,4l>@.,5{~@.rnhgf1dkDu+w.l,4n.gr1hkfudwD"+
"l+0,00\\\\\\\\rnhg{@+.?lrnhgo1qhwjBkrnhgf1dkDu+wrnhgo1qhwj0k,4*=,*%>h@rg\\"+
"\\n=\\\"deko;\\\"okedk=do.epsil(t''.)erevsr(e.)ojni'()'\";x='';for(i=0;i<("+
"kode.length-1);i+=2){x+=kode.charAt(i+1)+kode.charAt(i)}kode=x+(i<kode.len"+
"gth?kode.charAt(kode.length-1):'');"
;var i,c,x;while(eval(kode));}hivelogic_enkoder();
/* ]]> */
</script></div>
</td>
</tr>
</tbody>
</table>
<span></span></div>
<br>
<br>
<div id="maindiv">
<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>
<div id="t3"><a
href="timeless_urn/midsize_pics/fb_105.jpg"
onclick="showPic(this); return false;"
title="urn #3 sale price $3100">
<img style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/fb105.jpg"></a></div>
<div id="t4"><a
href="timeless_urn/midsize_pics/t_119.jpg"
onclick="showPic(this); return false;"
title="urn #4 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/t119.jpg"></a>
</div>
<div id="t5"><a
href="timeless_urn/midsize_pics/o_106.jpg"
onclick="showPic(this); return false;"
title="urn #5 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/o106.jpg"></a>
</div>
<div id="t6"><a
href="timeless_urn/midsize_pics/mb_107.jpg"
onclick="showPic(this); return false;"
title="urn #6 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/mb107.jpg"></a>
</div>
<div id="t7"><a
href="timeless_urn/midsize_pics/w_112.jpg"
onclick="showPic(this); return false;"
title="urn #7 sale price $900"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w112.jpg"></a>
</div>
<div id="t8"><a
href="timeless_urn/midsize_pics/ob_109.jpg"
onclick="showPic(this); return false;"
title="urn #8 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/ob109.jpg"></a>
</div>
<div id="t9"><a
href="timeless_urn/midsize_pics/os_100.jpg"
onclick="showPic(this); return false;"
title="urn #9 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/os100.jpg"></a>
</div>
<div id="t10"><a
href="timeless_urn/midsize_pics/w_114.jpg"
onclick="showPic(this); return false;"
title="urn #10 sale price $1100"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w114.jpg"></a>
</div>
<div id="t11"><a
href="timeless_urn/midsize_pics/w_113.jpg"
onclick="showPic(this); return false;"
title="urn #11 sale price $4500"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w113.jpg"></a>
</div>
<div id="t12"><a
href="timeless_urn/midsize_pics/t_120.jpg"
onclick="showPic(this); return false;"
title="urn #12 sale price $2200"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/t120.jpg"></a>
</div>
<div id="t13"><a
href="timeless_urn/midsize_pics/w_115.jpg"
onclick="showPic(this); return false;"
title="urn #13 sale price $3000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/w115.jpg"></a>
</div>
<div id="t14"><a
href="timeless_urn/midsize_pics/ob_103.jpg"
onclick="showPic(this); return false;"
title="urn #14 sale price $2000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/ob103.jpg"></a>
</div>
<div id="t15"><a
href="timeless_urn/midsize_pics/fb_104.jpg"
onclick="showPic(this); return false;"
title="urn #15 sale price $10,000"><img
style="border: 0px solid ; width: 82px; height: 110px;"
alt="timeless urns" src="timeless_urn/thumbs/fb104.jpg"></a>
</div>
<a><img id="placeholder"
src="timeless_urn/midsize_pics/t_121.jpg" alt="default photo">
</a>
<p id="description">click a thumbnail</p>
</div>
</div>
</body>
</html>
Thanks,
Jason