website code to show large and full size image on click

[sevenz24]

So i have my images set up like this : http://cgi.ebay.com/Tippmann-98-paintBall-Marker-Gun-Paint-Ball_W0QQitemZ2 50274334261QQih Z015QQcategoryZ 47248QQssPageNa meZWDVWQQrdZ1QQ cmdZViewItem

Scroll down to the bottom and you see several images, One large one and then several smaller ones, when you click on the smaller ones it places a larger version of that picture in place of where the other larger picture was, well i use this method on my website but what i want to do is make it so that when you click on the smaller image and it comes up in the larger image spot, you can click on the larger image also to make it into an even bigger supersized picture, but i cant simply link the large picture because it needs to change every time for each smaller picture, so what i need it some type of code that changes the background URL of the bigger image every time you click on the smaller image, while still letting it function properly. So i need someway of being able to do this. Like everytime you click the smaller image, a large one appears in the place of the large image and also somehow makes it so that when you click the large image it also takes you to a super sized image, either by way of URL or some other form.

Any help is greatly appreciated. Sorry for the long post but it is kind of hard for me to explain.

[acoder]

The src property of the image will contain the URL to the full-size image. Use that to show the full-size image onclick, e.g.

<img ... src="whatever.png" onclick="location.href=this.src;">

or

<a href="original.png" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="whatever.png"></a>

or you could change the href when you change the large image onclick of the small image.

[sevenz24]

Thank you very much for your reply, tho i am not sure how to insert your code into mine since i already have an onclick event in my code, this is the code i'm using currently for my picture setup:

 
<tr>           
<td height="399"><img src="http://dadetrader.com/Pics/PICT1591.JPG" name="productimages_" width="486" height="365" border="0" align="top"/></a></td>         
</tr>         
<tr>           
 
<td height="99" align="center" valign="top">
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1591.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1591.JPG" width="156" height="117" border="0"/></a>
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1592.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1592.JPG" width="156" height="117" border="0"/></a>
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1593.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1593.JPG" width="156" height="117" border="0"/</a><br></td>         
 
</tr>

(i spaced out the code so you can see it better)

Pretty much when i click on the 1591, 1592, 1593 small image links it then also shows up in the large image location, but what i want is after i do click on the small image link, and it does its magic, i also want the big image to now be clickable to show a supersized image, and obviously this has to change for each small image link i click. I was thinking the only way of doing this is by using some complicated javascript function or something to be able to use 2 onclick functions in 1 link/image or something like that, dont know.

[acoder]

Try replacing the large image with

<a href="http://dadetrader.com/Pics/PICT1591.JPG" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="http://dadetrader.com/Pics/PICT1591.JPG" ...></a>

[sevenz24]

ok so lets say my supersized image URL would be http://www.dadetrader.com/picsbg/pict1588.jpg, and ETC, how would i use that with this code?
also ultimately i am going to incorporate a popup window with the supersized image, so when you click the large image you get a popup with the supersized image.

[acoder]

The code would be the same or similar. The onclick changes the link href to the current source of the image (which will have been changed from clicking the small images).

To open a popup window, use window.open().

[sevenz24]

Hmm, this doesn't make much sense and is very confusing, nor does it solve the problem I'm asking at all, very unhelpful, oh well thanks anyway I will try another forum.

[acoder]

I can't see why you think that. If you follow what I've suggested, it should solve your problem. Have you tried incorporating the changes into your code? You've not shown me what you've attempted with the code given.

If there's a part of the code that you don't understand, I could explain it to you if you want. If JavaScript is the problem, perhaps you should be consulting a tutorial first. Sure, you may get someone doing all the work for you on another forum, but that wouldn't help much by way of learning. Hope that helps.

[sevenz24]

I can't see why you think that. If you follow what I've suggested, it should solve your problem. Have you tried incorporating the changes into your code? You've not shown me what you've attempted with the code given.

If there's a part of the code that you don't understand, I could explain it to you if you want. If JavaScript is the problem, perhaps you should be consulting a tutorial first. Sure, you may get someone doing all the work for you on another forum, but that wouldn't help much by way of learning. Hope that helps.

Yea I tried putting your code in, in many different ways, but it just doesnt work out the way I want it to.

I need the big picture to link me to http://www.dadetrader.com/picsbg/pict124.jpg (for example), changing that link everytime when clicking on the smaller picture, but it only links to the same picture opening up another page, which is what the smaller pictures are linked to.... but i cant change the smaller links because then it wouldnt change the large picture at all in the first place.

Also, Its much easier to learn when I do have the entire code, It lets me understand how it works and how I could change it and mend it next time to use it in another way for something different, instead of having no idea what your telling me or no idea of seeing how what your telling me could work... which right now im sure so far what you have showed me wont work the way I need it to, and the popup part is not a problem forget about that, if we could get it to actually link to the supersized image in the first place then that would be nice (which is the whole point).

[acoder]

OK, let's try again. In your code in post #3, replace line 2 with:

 
<td height="399"><a href="http://dadetrader.com/Pics/PICT1591.JPG" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="http://dadetrader.com/Pics/PICT1591.JPG" name="productimages_" width="486" height="365" border="0" align="top"/></a></td>

When the large image src property is changed, then the link href hasn't changed yet (though you could add that to each small image onclick, but let's try to keep things simple), so what the link onclick does is change the link href to point to whatever the current src of the large image is. Try it out and see what happens.