View Full Version : How to add another swapping image on same page?
06-05-2007, 03: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.
var oImgs = ;
oImgs = "mr16-w4_f.jpg"
oImgs = "mr16-w4_s.jpg"
oImgs = "mr16-w4_b.jpg"
var imgs = new Image();
imgs.src = "products/mr16/" + oImgs[i];
var x = 1;
var doc = document.getElementById("swap");
doc.src = "products/mr16/" + oImgs[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, 09:37 PM
you want it to do both at the same time or havethem do it individually?
06-05-2007, 10: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, 07:49 PM
brandonH can you help me with this, do you understand my description
06-08-2007, 03: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, 03:26 AM
link for image swapping function that can be used for multiple images:
06-08-2007, 03: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)
06-09-2007, 12:55 AM
ok i get what you wnat now.
first i would reccomend renaming your image files to something like:
this makes it easier for scripting purposes.
then what you do is something like this:
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.
Powered by vBulletin® Version 4.2.2 Copyright © 2015 vBulletin Solutions, Inc. All rights reserved.