We help IT Professionals succeed at work.

Change image, loop, every half second

Hi Experts,

The title pretty much says it all.

I don't know javascript.  I'm looking for something that will just switch out two images, but and forth on a loop.  If using scriptaculous library is possible that would be an even bigger help.

I'm not looking for anything fancy, or an actual photo gallery, I just need to images to switch back and forth, every .5 second or so, indefinately.

Thanks in advance for the help!

FDM
Comment
Watch Question

Top Expert 2011

Commented:
Straight Javascript - no plugins or libraries required:

<html>
<body>
<img src="image1.gif" alt="" id="swapMe" />
<script>
function imsgeSwapMe(imgToSwap){
  if (document.getElementById("imgToSwap").src == "image1.gif"){
    document.getElementById("imgToSwap").src="image2.gif";
  }else{
    document.getElementById("imgToSwap").src="image1.gif";
  }
}

window.setInterval("imageSwapMe('swapMe')",1000);

</script>
</body>
</html>

Open in new window

Top Expert 2011

Commented:
sorry - typo fix, and changed it to fire every 0.5 seconds (500 milliseconds), rather than once per second (1000 milliseconds).

<html>
<head>
<script>
function imageSwapMe(imgToSwap){
  if (document.getElementById("imgToSwap").src == "image1.gif"){
    document.getElementById("imgToSwap").src="image2.gif";
  }else{
    document.getElementById("imgToSwap").src="image1.gif";
  }
}
</script>
</head>
<body>
<img src="image1.gif" alt="" id="swapMe" />
<script>
window.setInterval("imageSwapMe('swapMe')",500);
</script>
</body>
</html>

Open in new window

Author

Commented:
this doesn't seem to be working.  There was a typo in line 5 which I changed (imsgeSwap to imageSwap), but still nothing

Author

Commented:
OK I see what you've changed...trying now.

Author

Commented:
still not working

here's the link http://jusfilters.com/

The image is the xmas lights
Top Expert 2011

Commented:
bleh - remove the quotes in the function:

function imageSwapMe(imgToSwap){
if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){
document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_2.png";
}else{
document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png";
}
} 

Open in new window

Author

Commented:
still nothing
Top Expert 2011

Commented:
Looks like when the code is getting the src of the image, it is returning the full URL to the image, rather than just the image name.

To get this to work, you'll need to do a little debugging on your side.

step 1: comment out the window.setInterval line so that it does not run, and replace it with this:
//window.setInterval("imageSwapMe('swapMe')",500);
imageSwapMe('swapMe');

Open in new window


step 2: add an alert to the function so that it shows you the value that it is actually finding, like this:
function imageSwapMe(imgToSwap){
  alert(document.getElementById(imgToSwap).src);
  if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){
    document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_2.png";
  }else{
    document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png";
  }
} 

Open in new window


step 3: write down the value that shows up in the alert box

step 4: remove the alert
step 5: change this line to be the value you wrote down in step 3
  if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){

Open in new window


step 6: test it (it should swap it once)
step 7: if it works, undo the changes you made in step 1
//window.setInterval("imageSwapMe('swapMe')",500);
imageSwapMe('swapMe');

Open in new window


I'll post an alternate approach in a couple minutes... the alternate approach will not require any debugging on your end.
Top Expert 2011
Commented:
The alternate approach:

<html>
<head>
<script>
function flicker(){
  if (document.getElementById("xmas_1").className == "lightson"){
    document.getElementById("xmas_1").className = "lightsoff";
    document.getElementById("xmas_2").className = "lightson";
  }else{
    document.getElementById("xmas_2").className = "lightsoff";
    document.getElementById("xmas_1").className = "lightson";
  }
} 
</script>
<style>
.lightson{display:block;}
.lightsoff{display:none;}
</style>

</head>
<body>
<img src="image1.gif" alt="" id="xmas_1" class="lightson" />
<img src="image2.png" alt="" id="xmas_2" class="lightsoff" />

<script>
window.setInterval("flicker()",500);
</script>
</body>
</html>

Open in new window


I renamed the function "flicker".
Create two new styles, I called them "lightson" and "lightsoff".
Add both images to your page, setting one of them to 'lightson" and the other to "lightsoff".  That way only one of them shows up.
flicker gets called every half second, alternately hiding whichever one is turned on and showing whichever one is turned off.

This will save you from having to use the full URL of the image which will make it run locally and on your production site.

Author

Commented:
That worked like a charm!

Thank you!

Author

Commented:
Thank you also nap0leon I'm sure yours would have worked if I spent the time debugging!
Top Expert 2011

Commented:
Glad to help... Apologies for the  confusion.   The alternate approach sometime has drawbacks, like needing to use display: inline instead of display:block or, if the image is large or the client machine is slow, stuff on the page may visibly move during the millisecond that bith images are "off", so I was hesitant to use that method first.

Author

Commented:
:) I am discovering that now as I checked in IE.  The page is moving....ughhhh.  Nothings ever simple is it....probably why I enjoy doing it.

Author

Commented:
display:inline solved that problem....dang wish I had some points for you.

Thanks again for the help!