View Full Version : How to add another swapping image on same page?

06-05-2007, 04:17 PM
I am using this code to swap an image when clicked on. I need to know how to be able to incorporate this "swapping" on the same page with another image. You can see it being used on the first image (an MR16-W4 light bulb) on the page http://www.superbrightleds.com/bi-pin.html
All I want to do is add this event to another light bulb on this page. All the images are in the same folder, products/mr16. I know it has something to do with the variables, I just don't know what or how.

<script type="text/javascript">

var oImgs = [];
oImgs[0] = "mr16-w4_f.jpg"
oImgs[1] = "mr16-w4_s.jpg"
oImgs[2] = "mr16-w4_b.jpg"

for(var i=0;i<oImgs.length;i++){
var imgs = new Image();
imgs.src = "products/mr16/" + oImgs[i];

var x = 1;

function swapImg(){
var doc = document.getElementById("swap");
doc.src = "products/mr16/" + oImgs[x];
x ++;
x = 0;



<img id="swap" src="products/mr16/mr16-w4_f.jpg" width="200" height="200" border="0" onclick="swapImg();" style="cursor:pointer;" /><br>

Thanks for reading. Mikey

06-05-2007, 10:37 PM
you want it to do both at the same time or havethem do it individually?

06-05-2007, 11:08 PM
Individually, with different images. User clicks on image and the images in that pic swap. Same thing for another image with other images swapping for that specific image. I don't have any code in my submission that involves this other image. The code is a working example for one image to swap on one page. I want to know what I have to add to this to allow me to swap another set of images on the same page.

06-07-2007, 08:49 PM
brandonH can you help me with this, do you understand my description

06-08-2007, 04:14 AM
ok, individually it is. the key to that is creating a single function that will handle both, but indipendently. I have posted a similar response else where, will post link to that thread when i find it.

06-08-2007, 04:26 AM
link for image swapping function that can be used for multiple images:

06-08-2007, 04:15 PM
I am sorry, I think you misunderstood me, which is my fault. I see your reference and that would not work for what I am doing. It is close, but not what I am looking for.
Please visit the working example, http://www.superbrightleds.com/bi-pin.htm (http://www.superbrightleds.com/bi-pin.html)
you will notice the first picture which swaps when clicked on. It is on the page under the large white title MR16-W4-GU10 White Nichia LED bulb. This is the exact javascript from my first post. Now directly under that picture you see the title MR16-WLX LUXEON LED BULBS and three pictures of three different bulbs under that. I would like to make one of those pictures of one of those bulbs do the same thing as the swapping picture that is above it on that same page, when the user clicks on those pictures specifically. Basic story is the user looks at my page and rotates (or swaps) the images of each individual bulb that the mouse is over and clicking on. Sorry for the lack of clarity and I appreciate your generous help.

06-09-2007, 01:55 AM
ok i get what you wnat now.

first i would reccomend renaming your image files to something like:

MR16_W4_0.jpg (front)
MR16_W4_1.jpg (side)
MR16_W4_2.jpg (back)




this makes it easier for scripting purposes.

then what you do is something like this:



<script type=text/javascript>
function swapImg(theimage){
var imagepath="http://www.yoursite.com/folder/";
var image=document.getElementById(theimage);
var pth=image.src;
var lngth=pth.length-5;
var numbertograb=pth.charAt(lngth);//this will be the number at the end of the files name

<img src="folder/MR16_W4_0.jpg" id=MR16_W4 onclick="swapImg(this.id);">
<img src="folder/MR16_WLX25_0.jpg" id=MR16_WLX25 onclick="swapImg(this.id);">
<img src="folder/MR16_WLX30_0.jpg" id=MR16_WLX30 onclick="swapImg(this.id);">
<img src="folder/MR16_WLX100_0.jpg" id=MR16_WLX100 onclick="swapImg(this.id);">


the above is just an example, the images it refers to are not real, you must insert your images and the name of your site into the code.

of course this does all rely on that you only have 3 images for each image,that all the images are .jpg, and that you rename your images as listed above.

hope this is what you were looking for.

by the way the above does not use preloaded images. i find it kinda pointless to preload all the images, seeing as though the user may not view all the images, and preloading them all will take up the users time when the page first loads.