Image change

This site is best viewed in a modern browser with JavaScript enabled.

Zion671

Hello Everyone,

I need help getting the right code for image change similar to this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_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?

boysingh

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!

Zion671

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

Zion671

Just to be clearer, let's say I want to change the bulb color from yellow, to orange to blue (looping; repeatable)

vwphillips

<!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>

exprolab

just look w3 school.It is very good for learning people.

JMRKER

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

<!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>