Image change

@Zion671Jan 27.2014

Hello Everyone,

I need help getting the right code for image change similar to this: ~~[url]~~http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb[/url]

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?

to post a comment

JavaScript

@boysinghJan 27.2014 — #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!

@Zion671authorJan 27.2014 — #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

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

@vwphillipsJan 27.2014 — #

[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>[/CODE]

@exprolabJan 27.2014 — #just look w3 school.It is very good for learning people.

@JMRKERJan 30.2014 — #Playing around with Vic's solution and created an educational display.

More bells and whistles can be added for correct choices.

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

Image change

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image change

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴