Home/ Questions/Q 8283295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:41:16+00:00

I am new to JavaScript and I am trying to make two different images

  • 0

I am new to JavaScript and I am trying to make two different images change when the user clicks a button. I got the first image to change, but now I don’t know how to have the next image change at the same time…

It works like this: Both starts as blue. After mouse-click, the left image will display the following sequence (ballblue, ballred, ballred…) the right image on the same button click will display the following (ballred, ballblue, ballred…).

I got this to work, but now how do I make the second image change in a different order (starts out as ballblue.gif, then on button click to ballred.gif, then ballblue.gif, and finally ballred.gif?

Here is my code so far:

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

<head><title></title></head>
<script type="text/javascript">
imgsleft=Array("ballblue.gif","ballblue.gif","ballred.gif","ballred.gif");
var x=0;

function lampSwitch()
{
    document.getElementById("left").src=imgsleft[++x];    
    if (x==3) {
        x=-1;
    }
}
if (!imgs[x+1]) {
    x=-1;
}
</script>
<body>
    <img src="ballblue.gif" id="left" alt="alttext" height="12" width="12"/>
    <img src="ballblue.gif" id="right" alt="alttext" height="12" width="12"/>
    <form action="#">
        <p><input type="button" value="Switch" onclick="lampSwitch()" /></p>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Code for alternating color:

    <html>
<head><title>Lamp Switch</title></head>
<script type="text/javascript">
imgsleft=Array("ballblue.gif","ballred.gif");
var x=0;

function lampSwitch(){
    if(++x % 2){
        document.getElementById("left").src=imgsleft[0];
        document.getElementById("right").src=imgsleft[1];
    }else{
        document.getElementById("left").src=imgsleft[1];
        document.getElementById("right").src=imgsleft[0];   
    }
} 
</script>
<body>
<img src="ballblue.gif" id="left" alt="alttext" height="12" width="12"/>
<img src="ballblue.gif" id="right" alt="alttext" height="12" width="12"/>
<form action="#">
<p><input type="button" value="Switch" onclick="lampSwitch()" /></p>
</form>
</body>
</html>

    Code for your specified pattern:

    Both starts as blue.

    Below is the pattern after button click

    left: blue red red…blue red red…blue red red (and repeats the same pattern)

    right: blue red blue red blue red blue …..

    <script type="text/javascript">
imgsleft = Array("ballblue.gif","ballred.gif");
pattern = Array("ballblue.gif","ballred.gif","ballred.gif");
var x=0;
var y=0;
function lampSwitch(){
    if(++x % 2){
        document.getElementById("right").src=imgsleft[1];
    }else{
        document.getElementById("right").src=imgsleft[0];   
    }

    y++;
    if(y == 3){
       y = 0;
    }
    document.getElementById("left").src=pattern[y];
} 
</script>
    • 0