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
LVL 9
FDMilwaukeeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
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

0
nap0leonCommented:
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

0
FDMilwaukeeAuthor Commented:
this doesn't seem to be working.  There was a typo in line 5 which I changed (imsgeSwap to imageSwap), but still nothing
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

FDMilwaukeeAuthor Commented:
OK I see what you've changed...trying now.
0
FDMilwaukeeAuthor Commented:
still not working

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

The image is the xmas lights
0
nap0leonCommented:
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

0
FDMilwaukeeAuthor Commented:
still nothing
0
nap0leonCommented:
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.
0
nap0leonCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
FDMilwaukeeAuthor Commented:
That worked like a charm!

Thank you!
0
FDMilwaukeeAuthor Commented:
Thank you also nap0leon I'm sure yours would have worked if I spent the time debugging!
0
nap0leonCommented:
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.
0
FDMilwaukeeAuthor 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.
0
FDMilwaukeeAuthor Commented:
display:inline solved that problem....dang wish I had some points for you.

Thanks again for the help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.