Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to add another swapping image on same page?

    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.

    Code:
    <head>
    <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];
    if(x<oImgs.length-1){
    x ++;
    }else{
    x = 0;
    }
    }
    
    //-->
    
    </script>
    </head>
    
    <body>
     <img id="swap" src="products/mr16/mr16-w4_f.jpg" width="200" height="200" border="0" onclick="swapImg();" style="cursor:pointer;" /><br>
    </body>
    Thanks for reading. Mikey
    Last edited by funkysig; 06-05-2007 at 03:20 PM. Reason: code was off

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    you want it to do both at the same time or havethem do it individually?
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by funkysig; 06-05-2007 at 10:11 PM.

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    brandonH can you help me with this, do you understand my description

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    link for image swapping function that can be used for multiple images:
    http://www.codingforums.com/showthread.php?t=72270
    Last edited by brandonH; 06-08-2007 at 03:27 AM. Reason: correction
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    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.
    Last edited by funkysig; 06-08-2007 at 03:34 PM. Reason: correction

  • #8
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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)

    MR16_WLX25_0.jpg
    MR16_WLX25_1.jpg
    MR16_WLX25_2.jpg

    MR16_WLX30_0.jpg
    MR16_WLX30_1.jpg
    MR16_WLX30_2.jpg

    MR16_WLX100_0.jpg
    MR16_WLX100_1.jpg
    MR16_WLX100_2.jpg

    this makes it easier for scripting purposes.

    then what you do is something like this:

    Code:
    <html>
    <head>
    
    </head>
    
    
    <body>
    <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
    numbertograb++;
    if(numbertograb>='3'){numbertograb='0';}
    image.src=imagepath+theimage+"_"+numbertograb+".jpg";
    }
    </script>
    
    <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);">
    </body>
    
    
    </html>

    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •