[dbrod1689]

Hey I'm not very knowledgable with java AT ALL but I have something I would like to do on my website, that I'm not sure of any other way to do it other than javascript.

Basically I want to have a list of thumbnails on the left of my page and an open area on the right side of the page that would be filled with an image (something along the lines of Click a thumbanil on the left to view). When you click a thumbnail on the left, I would it to change the "click the thumbnail" image to a full size of the thumbnail.

If this is hard to understand check out this page; its basically exactly what I want:
www.thedecoderring.com/portfolio/posters/

I have read their source code and tried to paste this into my page:

	<a href=".." java script:changeimages('ali', 'img/_grid.jpg','1');"><img src="img/_ali.jpg"></a>	

Please help. I'm javascript illiterate. If you have the answer, I would assume I know nothing in java because.. thats pretty accurate.

Thanks a lot!

[dbrod1689]

I just realized this is the wrong forum.

Java, not javascript under the web forums. Sorry.

[skyhawk133]

Moved. Thanks for catching that.

[dbrod1689]

Okay so I've worked more and more on this and read around on the internet and I've now gotten this in my body as a test page:

<table width="200" height="340" border="0" bgcolor="#333333" cellspacing="0" cellpadding="5">
  <tr>
	<td><a href="java script:changeimages('board', 'img/_kush.jpg','grid');"><img src="img/_grid.jpg" name="grid"></a></td>
	
	<td><img src="img/_board.jpg" alt="ali shower" name="board" width="50" height="50" border="0"></td>
  </tr>
</table>

Basically this is saying I have two images; one called "grid", and one called "board". I want this script so that if you click "grid", then "board" changes to load "img/_kush.jpg."

Do I need to write something in my head? I dont knowwwww. I've spent 48 hours on this.. THATS how bad I am with javascript.

ALSO- part of why this is not working might have to do with the fact that I'm not sure exactly what the third parameter of the changeimage tag is supposed to be. I don't know what it represents. From looking at other source codes it looked to me like you put the image you are clicking to change the images there which is why I have "grid" as the third parameter. I don't know. If someone can explain then thank you!!!

This post has been edited by dbrod1689: 14 May 2008 - 12:36 AM

[Warlox89]

Give this a shot, it simplify triggers a change of the img containing 'board' to a diffrent 'img' when clicking on the grid.

<!--
//Head Code
//-->
<script language="Javascript">
<!--
function changeImg(name,img) {
  document.getElementById(name).innerHTML="<img src='img/" +img+ "' alt='ali shower' name='board' width='50' height='50' border='0'>";
}
//-->
</script>

<!--
//Body Code
//-->
<table width="200" height="340" border="0" bgcolor="#333333" cellspacing="0" cellpadding="5">
  <tr>
	<td><a href="java script:void(0);" onclick="java script:changeImg('board', '_kush.jpg');"><img src="img/_grid.jpg" name="grid"></a></td>
	
	<td><img src="img/_board.jpg" alt="ali shower" name="board" width="50" height="50" border="0"></td>
  </tr>
</table>

[dbrod1689]

Hmm I tried that but it still didn't work for some reason.

I'm not sure what the problem is.

[Warlox89]

dbrod1689, on 14 May, 2008 - 03:05 PM, said:

Hmm I tried that but it still didn't work for some reason.

I'm not sure what the problem is.

Make sure that the 'java script:void(0);' and 'java script:changeImg('board', '_kush.jpg');' dont have spaces between java and script, since some reason the code function on here makes it space out =X

[dbrod1689]

Alright I did that, and for some reason it is STILL not working. I dont know what the deal is. I've checked all the paths of my images and re-read the code.

Basically a page loads with the two images, one being a link and one static.

I click the link image.. and nothing happens.

Down in the status bar it DOES say "run java script:void(0)" or whatever the script name was.. I don't have it open anymore.

It's just not working.

This post has been edited by dbrod1689: 15 May 2008 - 02:16 AM

[Warlox89]

Ok this is what I remembered when I tried in html file's instead of top of my head .. Use id="..." instead of name="..." and use the id's in a div to contain the img stuff.

simpiliy put your images in the folder named 'img' than try it out, since this one worked for my because I tested it.

<html>
<head>
<title>Warlox's Debug - Img Change</title>
<script type="text/Javascript">
<!--
//change Img function
function changeImg(name,img) {
  document.getElementById(name).innerHTML="<img src='img/" +img+ "' alt='ali shower' name='board' width='50' height='50' border='0'>";
}
//-->
</script>
</head>
<body>
<table width="200" height="340" border="0" bgcolor="#333333" cellspacing="0" cellpadding="5">
  <tr>
	<td>
	  <div id="grid">
		<a href="void(0);" onclick="changeImg('board', '_kush.jpg')">
		  <img src="img/_grid.jpg" name="grid">
		</a>
	  </div>
	</td>
	<td>
	  <div id="board">
		<img src="img/_board.jpg" alt="ali shower" name="board" width="50" height="50" border="0">
	  </div>
	</td>
  </tr>
</table>
</body>
</html>

This post has been edited by Warlox89: 15 May 2008 - 05:10 AM

[dbrod1689]

Using the <div> tag made all the difference

Thank you so much for your help!