...

View Full Version : Javascript image swap help



chazthetic
02-07-2007, 10:55 PM
I'm having trouble getting a piece of javascript I'm using to work. Basically I have my project image load on the left, and when you click on the numbers below and on the right of the image, the corresponding image should load where the original one is.

The test is here: (my actual site is down for a couple days while I switch hosting providers)
http://aestheticphiladelphia.com/cfportfolio/portfolio/agizentest2.php

I took the script from here:
http://alistapart.com/articles/imagegallery

I'm not that experienced in Javascript. Can anyone see what i'm doing wrong?

neomaximus2k
02-07-2007, 11:37 PM
Simple, the current image put into a DIV tag with an ID in it, then when you click 2 get it to call a javascript function which changes the innerHTML and shows the second image.

something like this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function swapimage(NUMBER){
if (NUMBER == "1")IMAGE = "firstimage.jpg";
else if (NUMBER == "2")IMAGE = "secondimage.jpg";

document.getElementById("swappingdiv").innerHTML = "<img src=\""+IMAGE+"\" />";
}

</script>
</head>

<body>
<div id="swappingdiv"><img src="firstimage.jpg" /></div>
<a href="Javascript:" onclick="swapimage('1');">1</a>
<a href="Javascript:" onclick="swapimage('2');">2</a>
</body>
</html>

chazthetic
02-07-2007, 11:52 PM
I can't thank you enough, that worked beautifully. I knew it had to be something simple like that, but like I said, i don't know enough javascript.

For some reason, everytime I click on one of the numbers, it's bringing up the error console but not reporting an error with the page (I'm using firefox on a mac). Any idea why this would happen?

neomaximus2k
02-08-2007, 12:12 AM
No idea, works ok in FireFox on the PC no error console appears,

try this little one instead


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function swapimage(NUMBER){
document.getElementById("swappingdiv").innerHTML = "<img src=\""+IMAGE+"\" />";
}

</script>
</head>

<body>
<div id="swappingdiv"><img src="firstimage.jpg" /></div>
<a href="Javascript:" onclick="swapimage('firstimage.jpg'); return false;">1</a>
<a href="Javascript:" onclick="swapimage('secondimage.jpg'); return false;">2</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum