I’m trying to use javascript to load an image on a webpage when another image is clicked on, just like an image gallery and just like this except I don’t need any text:

http://javascript.internet.com/image…e-gallery.html

I copied the example above but when I click on the smaller image to load the larger one it works for a fraction of a second (I can see the image load in the right spot), but then the browser goes to the URL of the image instead (showing it on a blank page).

See what I mean here:

http://www.keeneysandandstone.com/boulders-js.html

Clickin on one of the smaller boulder images is supposed to load the larger version of that image below.

Related code:

imageGallery.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */
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;
}
}

HTML

Head:

<script type="text/javascript" src="imageGallery.js"></script>

Body:

<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" align="center"><a onclick="showPic(this); return false;" href="images/boulder1.jpg" /><img src="images/boulder1-thumb.jpg" width="197" height="125" /></a></td>
<td width="25%" align="center"><a onclick="showPic(this); return false;" href="images/boulder2.jpg" /><img src="images/boulder2-thumb.jpg" width="197" height="125" /></a></td>
<td width="25%" align="center"><a onclick="showPic(this); return false;" href="images/boulder3.jpg" /><img src="images/boulder3-thumb.jpg" width="197" height="125" /></a></td>
<td width="25%" align="center"><a onclick="showPic(this); return false;" href="images/boulder4.jpg" /><img src="images/boulder4-thumb.jpg" width="197" height="125" /></a></td>
</tr>
</table>

…

Where the image should load:

<img id="placeholder" src="images/boulder1.jpg">

Any help appreciated. I’m not a programmer, just a designer, and this has stumped me.

Thanks!