FDMilwaukee
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
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
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>
ASKER
this doesn't seem to be working. There was a typo in line 5 which I changed (imsgeSwap to imageSwap), but still nothing
ASKER
OK I see what you've changed...trying now.
ASKER
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";
}
}
ASKER
still nothing
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:
step 2: add an alert to the function so that it shows you the value that it is actually finding, like this:
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
step 6: test it (it should swap it once)
step 7: if it works, undo the changes you made in step 1
I'll post an alternate approach in a couple minutes... the alternate approach will not require any debugging on your end.
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');
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";
}
}
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"){
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');
I'll post an alternate approach in a couple minutes... the alternate approach will not require any debugging on your end.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked like a charm!
Thank you!
Thank you!
ASKER
Thank you also nap0leon I'm sure yours would have worked if I spent the time debugging!
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.
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.
ASKER
display:inline solved that problem....dang wish I had some points for you.
Thanks again for the help!
Thanks again for the help!
Open in new window