asked on

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

nap0leon

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

nap0leon

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

FDMilwaukee

ASKER

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

FDMilwaukee

ASKER

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

FDMilwaukee

ASKER

still not working

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

The image is the xmas lights

nap0leon

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

FDMilwaukee

ASKER

still nothing

nap0leon

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.

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FDMilwaukee

ASKER

That worked like a charm!

Thank you!

FDMilwaukee

ASKER

Thank you also nap0leon I'm sure yours would have worked if I spent the time debugging!

nap0leon

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.

FDMilwaukee

ASKER

:) 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.

FDMilwaukee

ASKER

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

Thanks again for the help!