Javascript photo gallery

[bantman]

Hi there!

I am new to javascript and i need some help in getting my code to work. Essentially you click the links and the image should be displayed in the table cell to the left, however at the moment everytime i click the link it is opening it in a new window. I just can't seem to spot what is going wrong!

Here is the javascript:

<script type="text/javascript" language="javascript">
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;
 }
}
</script>

And here is where i call the script in the HTML:

<td colspan="2" valign="bottom">
     <p id="desc">Choose an image to begin</p>
     <img id="placeholder" src="placeholder.gif" alt="" />
</td>
<td colspan="2" valign="bottom">
     <a onclick="return showPic(this)" href="books_2.gif" title="A Book!">Book</a>
</td>

Any help at all will be very gratefully received!!!



Thanks

Bantman

 

[vicvirk]

You're JS is too much for what you are trying to achieve...here's a short and simple solution, if the user has JS disabled it will open the image in a new window otherwise it will replace the image in the placeholder.

<script language="javascript">
	function showPic(whichPic) {
		var image = document.getElementById(whichPic).href;
		document.getElementById("placeHolder").innerHTML = "<img src='" + image + "' />"
		return false;
	}
</script>

<div id="placeHolder"></div>
<a href="image1full.gif" id="image1" onClick="return showPic(this.id);"><img src="image1tn.gif" /></a>
<a href="image2full.gif" id="image1" onClick="return showPic(this.id);"><img src="image2tn.gif" /></a>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[vicvirk]

^oops!

Every image should have a unqiue id

<a href="image1full.gif" id="image1" onClick="return showPic(this.id);"><img src="image1tn.gif" /></a>
<a href="image2full.gif" id="image2" onClick="return showPic(this.id);"><img src="image2tn.gif" /></a>


TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers