www.webdeveloper.com
Results 1 to 7 of 7

Thread: Image change

  1. #1
    Join Date
    Jan 2014
    Posts
    3

    Image change

    Hello Everyone,

    I need help getting the right code for image change similar to this: http://www.w3schools.com/js/tryit.as...ryjs_lightbulb

    My problem is I can't seem to change into MULTIPLE IMAGES, only two images are swapped and not more than that.
    What is the right code to add if I want to add more images?

  2. #2
    Join Date
    Dec 2013
    Posts
    201
    Hmm, Yeah, I get that you want to put multiple images, hmm, can you give us more details about what you want to do??hmmm.. Thanks!

  3. #3
    Join Date
    Jan 2014
    Posts
    3
    I want to be able to change to different image MANY times. The code in w3 tutorial only show how to change image twice. Thank you

  4. #4
    Join Date
    Jan 2014
    Posts
    3
    Just to be clearer, let's say I want to change the bulb color from yellow, to orange to blue (looping; repeatable)

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Swap(img,s1,s2){
      var ud=img.src.match(s1);
      img.src=img.src.replace(ud?s1:s2,ud?s2:s1);
    }
    /*]]>*/
    </script>
    <body>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
    <img src="http://www.w3schools.com/js/pic_bulbon.gif" onclick="Swap(this,'bulboff','bulbon');" />
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Jan 2014
    Posts
    3
    just look w3 school.It is very good for learning people.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Playing around with Vic's solution and created an educational display.
    More bells and whistles can be added for correct choices.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Binary Lights</title>
    </head>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?289517-Image-change
    
    /*<![CDATA[*/
    
    function Swap(img,s1,s2){
      var ud=img.src.match(s1);
      img.src=img.src.replace(ud?s1:s2,ud?s2:s1);
    }
    /*]]>*/
    </script>
    <body>
    <h1>Binary Logic</h1>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
    <img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
    <br>
    <button onclick="resetLights()">Reset</button> 
    <button onclick="createRndNumber()">Create Number</button> 
    <button onclick="checkAnswer()">Check Answer</button>
    <div id="debug" style="font-size:2em"></div>
    
    <script type="text/javascript">
    function createRndNumber() {
      var maxN = 256;
      document.getElementById('debug').innerHTML = Math.floor(Math.random()*maxN);
    }
    function checkAnswer() {
      var num = '';
      var sel = document.getElementsByTagName('img');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].src.indexOf('bulbon') != -1) { num += '1'; } else { num += '0'; }
      }
      document.getElementById('debug').innerHTML += '<br>Your pick = '+num + ' is ' + parseInt(num,2);
    }
    function resetLights() {
      var sel = document.getElementsByTagName('img');
      for (var i=0; i<sel.length; i++) {
        sel[i].src = "http://www.w3schools.com/js/pic_bulboff.gif";
      }
      document.getElementById('debug').innerHTML = '';
    }
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles