Javascript image loader

EDIT: Changed my methods, disregard this post. Use the code if you want to


I'm trying to use getelementbyid to load the desired image when its thumbnail is clicked.

The place it loads to is a div with an image called placeholder.

<img id="placeholder" src="../images/blank.gif" alt="" /></div>

Code (markup):

When I click the thumbails, it shows the image in the div, but then redirects me to the image location (eg www.site.com/image.gif)

What am I doing wrong?

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; 
	} 
}

Code (markup):

I realize that this will only load the same image and not an enlarged one, but that can come after this part is fixed

This is my smarty template code

<a onclick="return showPic(this)" href="{$prize->imgurl}" title="{$prize->name}"><img src="{$prize->imgurl}" onMouseOver="return escape('{$prizedesc}');"></a>

Code (markup):

which would yield something like this:

<a onclick="return showPic(this)" href="/images/360_sm.jpg" title="Wii 1"><img src="/images/360_sm.jpg" onMouseOver="return escape('');"></a><br>

Code (markup):

Eventually I want some sort of array where I can define the larger image to load.

Is there a better way?