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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    switching image with by clicking radio buttons

    Hi,

    I looked around to see javascript codes on websites but had no luck in finding what I wanted... or I just don't know how to work with it

    I want to switch/replace image with other images by clicking on radio buttons. i have the html, but how can I make this work???

    can anyone help me out?

    Code:
    <body>
    <p><img name="main" src="black.jpg" width="100" height="100" alt=""></p>
    <p>
      <input type="radio" name="red" id="radio" value="radio" onClick="display red in main image">
    </p>
    <p>
      <input type="radio" name="blue" id="radio2" value="radio" onClick="display blue in main image">
    </p>
    <p>
      <input type="radio" name="green" id="radio3" value="radio" onClick="display green in main image">
    </p>
    <p>
      <input type="radio" name="yellow" id="radio4" value="radio" onClick="display yellow in main image">
    </p>
    <p>
      <input type="radio" name="black" id="radio5" value="radio" onClick="this would this play the main image 'black'.jpg">
    </p>
    </body>
    thanks for any help in advance!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Modified from an earlier post: http://www.codingforums.com/showthread.php?t=230829
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    
      var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
      var picFiles = [
         '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];  // can be expanded with more images
    
    var imgPtr = 0;
    
    // Create function to load image
    function loadImg(ptr){
      document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
    }
    
    // Create link function to switch image backward
    function prev() {
      if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
      loadImg(imgPtr);
    }
    
    // Create link function to switch image forward
    function next(){
      if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
      loadImg(imgPtr);
    }
    
    // Load function after page loads
    onload = function() { loadImg(0); }
    
    </script>
    </head>
    <body>
    
    <input type="radio" onclick="loadImg(0)"> 1
    <input type="radio" onclick="loadImg(1)"> 2
    <input type="radio" onclick="loadImg(2)"> 3
    <input type="radio" onclick="loadImg(3)"> 4
    <input type="radio" onclick="loadImg(4)"> 5
    <p>
    
    <img name="imgSrc" id="imgSrc">
    
    <p>
    <a href="javascript:void(0)" onClick="prev();">older</a>
     &nbsp; 
    <a href="javascript:void(0)" onClick="next();">newer</a>
    
    </body>
    </html>
    Maybe not what you want, but it might be a start to keepin' on keepin' on.

  • Users who have thanked jmrker for this post:

    lionpix90 (07-01-2011)

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    maybe use this demo as a guide

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var picpaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg'];
                //preload the images
                var picO = new Array();
                for(i=0; i < picpaths.length; i++){
                    picO[i] = new Image();
                    picO[i].src = picpaths[i];
                }
                function swapImage(picNum){
                    imgMainO.src = picO[picNum].src
                }
                window.onload=function(){
                    imgMainO = document.getElementById('imgMain');
                    swapImage(0);
                    var btnRadsO = document.getElementsByName('myRad');
                    for(i=0; i < btnRadsO.length; i++){
                        btnRadsO[i].num = i;
                        btnRadsO[i].onclick = function(){swapImage(this.num);}
                    }
                }
            </script>
        </head>
        <body>
            <p><img id="imgMain" src="" width="100" height="100" alt=""/></p>
            <p>
                <input type="radio" name="myRad" value="" />
            </p>
            <p>
                <input type="radio" name="myRad" value="" />
            </p>
            <p>
                <input type="radio" name="myRad" value="" />
            </p>
            <p>
                <input type="radio" name="myRad" value="" />
            </p>
            <p>
                <input type="radio" name="myRad" value="" />
            </p>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    lionpix90 (07-01-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you so much!!

    I think they are working great!

    just have to fit it in my html page now

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What if I want to add another of the same thing on the same page...?

    so, TWO base images and TWO groups of images

    Sorry about changing my mind...

    but can a bit of more code be added to the original one so I would have ?
    (I used the code by JMRKER)




    I tried doubling this code:

    Code:
    <script type="text/javascript">
    
      var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
      var picFiles = [
         '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];  // can be expanded with more images
    
    var imgPtr = 0;
    
    // Create function to load image
    function loadImg(ptr){
      document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
    }
    
    // Create link function to switch image backward
    function prev() {
      if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
      loadImg(imgPtr);
    }
    
    // Create link function to switch image forward
    function next(){
      if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
      loadImg(imgPtr);
    }
    
    // Load function after page loads
    onload = function() { loadImg(0); }
    
    </script>
    but i guess thats not the way it works...

    asking for help again... thanks for any help!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    One method, but 'bullant's might be better to modify for this type of duplication. I just have not tried to modify his version yet.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
      .imgBlock { border:1px solid red; width:160px; float:left; text-align:center;}
    </style>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
    
    var picFile0 = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];  // each can be expanded with more images
    var picFile1 = ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'];
    var picFile2 = ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'];
    
    var imgPtr = [
    //  [current_image,baseURL,filenames,display_image]
        [0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc0'],
        [0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc1'],
        [0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc2']  // No comma after last entry
    ];
    
    // Create function to load image
    function loadImg(imgGroup) {
      var picFile = [];  
      var imgID = imgPtr[imgGroup][2];
      switch (imgGroup) {
        case '0' : picFile=[].concat(picFile0); break;
        case '1' : picFile=[].concat(picFile1); break;
        case '2' : picFile=[].concat(picFile2); break;
        default  : alert('Invalid assignment\n'+imgGroup); break;
      }
      var ptr = imgPtr[imgGroup][0];
      if (ptr < 0) { ptr = 0; }
      if (ptr > picFile.length-1) { ptr = picFile.length-1; }
      document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
      imgPtr[imgGroup][0] = ptr;
      var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
      document.getElementById(rbtn).checked = true;
    }
    
    // Create link function to switch image backward
    function prev(imgGroup) {
      imgPtr[imgGroup][0]--;
      loadImg(imgGroup);
    }
    
    // Create link function to switch image forward
    function next(imgGroup){
      imgPtr[imgGroup][0]++;
      loadImg(imgGroup);
    }
    
    // Load function after page loads
    onload = function() { 
      loadImg('0');
      loadImg('1');
      loadImg('2');
    }
    
    </script>
    </head>
    <body>
    
    <div class="imgBlock">
     <input type="radio" name="rg0" id="rg00" onclick="imgPtr[0][0]=0;loadImg('0')" checked>
     <input type="radio" name="rg0" id="rg01" onclick="imgPtr[0][0]=1;loadImg('0')">
     <input type="radio" name="rg0" id="rg02" onclick="imgPtr[0][0]=2;loadImg('0')">
     <input type="radio" name="rg0" id="rg03" onclick="imgPtr[0][0]=3;loadImg('0')">
     <input type="radio" name="rg0" id="rg04" onclick="imgPtr[0][0]=4;loadImg('0')">
     <br>
     <img name="imgSrc0" id="imgSrc0">
     <br>
     <a href="javascript:void(0)" onClick="prev('0');">Prev</a>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
     <a href="javascript:void(0)" onClick="next('0');">Next</a>
    </div>
    
    <div class="imgBlock">
     <input type="radio" name="rg1" id="rg10" onclick="imgPtr[1][0]=0;loadImg('1')" checked>
     <input type="radio" name="rg1" id="rg11" onclick="imgPtr[1][0]=1;loadImg('1')">
     <input type="radio" name="rg1" id="rg12" onclick="imgPtr[1][0]=2;loadImg('1')">
     <input type="radio" name="rg1" id="rg13" onclick="imgPtr[1][0]=3;loadImg('1')">
     <input type="radio" name="rg1" id="rg14" onclick="imgPtr[1][0]=4;loadImg('1')">
     <br>
     <img name="imgSrc1" id="imgSrc1">
     <br>
     <a href="javascript:void(0)" onClick="prev('1');">Prev</a>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp 
     <a href="javascript:void(0)" onClick="next('1');">Next</a>
    </div>
    
    <div class="imgBlock">
     <input type="radio" name="rg2" id="rg20" onclick="imgPtr[2][0]=0;loadImg('2')" checked>
     <input type="radio" name="rg2" id="rg21" onclick="imgPtr[2][0]=1;loadImg('2')">
     <input type="radio" name="rg2" id="rg22" onclick="imgPtr[2][0]=2;loadImg('2')">
     <input type="radio" name="rg2" id="rg23" onclick="imgPtr[2][0]=3;loadImg('2')">
     <input type="radio" name="rg2" id="rg24" onclick="imgPtr[2][0]=4;loadImg('2')">
     <br>
     <img name="imgSrc2" id="imgSrc2">
     <br>
     <a href="javascript:void(0)" onClick="prev('2');">Prev</a>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
     <a href="javascript:void(0)" onClick="next('2');">Next</a>
    </div>
    
    </body>
    </html>
    This is fairly easy to modify, just be aware typos can cause havoc!

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by lionpix90 View Post
    What if I want to add another of the same thing on the same page...?
    In this type of scenario I would use an OOP approach along this line which imo makes the code easier to maintain.

    You can add as many slideshow pics to the slideShowPics array as you like where each row in the array contains the pics for each slideshow.

    Then create the html for each slideshow wherever you like on your page. The demo uses the html in the <body>.

    The window.onload creates a slideshow object for each slideshow. To each slideshow object you pass the preloaded images for that slideshow and the element id of the slideshow container.

    Each slideshow has its own previous and next buttons.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var slideShowPics = [
                    ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg'],
                    ['num6.jpg','num7.jpg','num8.jpg']
                ];
                //preload the images
                var ssPicsO = new Array();
                for(i=0; i < slideShowPics.length; i++){
                    ssPicsO[i] = new Array();
                    for(j=0; j < slideShowPics[i].length; j++){
                        ssPicsO[i][j] = new Image();
                        ssPicsO[i][j].src = slideShowPics[i][j];
                    }
                }
                function slideShowObj(pics,cont){
                    var picsA = pics;
                    var ssContO = document.getElementById(cont);
                    var imgO = ssContO.getElementsByTagName('img')[0];
                    var curPic = 0;
                    function swapImage(dirn){
                        curPic += dirn;
                        if(curPic < 0){curPic = 0;}
                        if(curPic > picsA.length-1){curPic = picsA.length-1;}
                        imgO.src = picsA[curPic].src;
                    }
                    //assign the button onclicks
                    var btnsO = ssContO.getElementsByTagName('button');
                    btnsO[0].onclick = function(){swapImage(-1);}
                    btnsO[1].onclick = function(){swapImage(1);}
                    //assign the first image
                    swapImage(0);
                }
                window.onload=function(){
                    var ss1 = new slideShowObj(ssPicsO[0],'ss1Cont');
                    var ss2 = new slideShowObj(ssPicsO[1],'ss2Cont');
                }
            </script>
        </head>
        <body>
            <div id="ss1Cont">
                <img src="" alt="" />
                <div>
                    <button>Previous</button>
                    <button>Next</button>
                </div>
            </div>
            <div id="ss2Cont">
                <img src="" alt="" />
                <div>
                    <button>Previous</button>
                    <button>Next</button>
                </div>
            </div>
        </body>
    </html>
    Maintenance:

    Say now you wanted to add a third slideshow to your web page.

    All you have to do is:

    1) add another row of pics to the slideShowPics array.

    2) copy and paste the html for an existing sldieshow to another location on your web page and give the sldieshow container an id.

    3) add this line, with the appropriate element id, to window.onload

    Code:
    var ss3 = new slideShowObj(ssPicsO[2],'ss3Cont');
    You don't have to touch the rest of the javascript at all.

    If you want to still use radio buttons to swap the images in each slideshow, then you can create them dynamically in slideShowObj(pics,cont) by using document.createElement() in a loop from 0 to picsA.length-1. In each iteration of the loop assign a property to each radio button called, say, num and give it the value of i (the loop iteration counter). Then, also at each iteration, assign an onclick to each radio button that calls a function that accepts the current radio button object. That function then simply assigns the src of the slideshow's <img> to the image file at the element num in picsA
    Last edited by bullant; 07-02-2011 at 04:36 AM.

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks so much guys... you guys are just great

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

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