Jump to content

Changing image source using javascript


gap2401
 Share

Recommended Posts

I'm trying to set up a picture gallery (with my own code so I can get some practice with html, javascript, DOM, etc.). When a thumbnail is clicked on, the main picture is supposed to change. The problem is that I can't get the picture to change permanently when I click on a thumbnail. Whenever I click, the right image comes up but is immediately replaced back with the original image. I'm not sure if this is even a js problem; it could be something in the html code.1. How can I get this to work properly?2. Also, is there an easier/better way to do this?Thanks.

<head><script type="text/javascript">function setPic(url) {	document.images["picture"].src = url;}</script></head><body bgcolor="#fffccc"><table><tr><!--THUMBNAILS--><td valign="top"><table cellpadding="1" border="1" bgcolor="#000000"><tr><td><form><input type="image" src="logarska_dolina/CD_2_(8).jpg" height="50" width="50" onclick="setPic(this.src)"></input></form></td></tr><tr><td><form><input type="image" src="logarska_dolina/CD_2_(9).jpg" height="50" width="50" onclick="setPic(this.src)"></input></form></td></tr></table></td><!--PICTURE--><td>	<table cellpadding="10" border="1" bgcolor="#000000">  <tr><td align="center" name="img_cell">  <img src="logarska_dolina/CD_2_(8).jpg" name="picture"></img>  </td></tr>	</table></td></tr></table></body></html>

Link to comment
Share on other sites

I don't know why, I never worked with forms this way, but it seems that when you click any of the two thumbnails, the page reloads, so the big picture will always show what is initially defined in its src attribute.Use simple img tags instead of forms:<tr><td><img src="logarska_dolina/CD_2_(8).jpg" height="50" width="50" onclick="setPic(this.src)"></td></tr><tr><td><img src="logarska_dolina/CD_2_(9).jpg" height="50" width="50" onclick="setPic(this.src)"></td></tr>

Link to comment
Share on other sites

  • 8 months later...
Does anyone have an idea of how i can do this. I've searched all over the internet but no luck.
Are you looking for a tool to do this for you or are you just wondering how it works? If you're looking for a tool, best to google for "Web Slideshow Generator". Picasa may be able to do this...If you just want to know how it works, grab the source of the page and step through to figure out what it's doing. All of their methods seem to be here: http://www.wwe.com/js/photogallery.js It's a little convoluted, but it works.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...