• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

switch image at regular intervals

 
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
hi, i have two images and i want to switch back and forth at regular interval. how can i do that using javascript? i know how to preload them so they change instantly.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is a setTimeout() (not sure of exact spelling) method on the window object that you can use to schedule a function to fire at your desired intervals.
hth,
bear
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
thanks bear,
there is setTimeout() and setInterval()
the one i mant is setInterval
here is what i came up with but there is something wrong


<html>
<head>
<script language="javascript">
band1 = new Image();
band1.src = "evercleara.jpg";
band2 = new Image();
band2.src = "everclearb.jpg";
function switch() {
band = "everclearb.jpg"
if (document.band.src == "everclearb.jpg") {
band = "evercleara.jpg"
document.band.src = band
}
}
setInterval(switch(), 30000)
</script>
</head>
<body>
<p align="center"><b>Songs From An American Movie Vol. 2 - Good Time For A Bad Attitude</b></p>
<table><tr>
<td>
01. When It All Goes Wrong Again
</td>
<td rowspan="12">
<img name="band" src="evercleara.jpg">


any help appreciated
[ June 09, 2002: Message edited by: Randall Twede ]
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
i thought i found the problem but it still doesnt work


<head>
<script language="javascript">
band1 = new Image();
band1.src = "evercleara.jpg";
band2 = new Image();
band2.src = "everclearb.jpg";
function switch() {
band = "everclearb.jpg"
if (document.band.src == "everclearb.jpg") {
band = "evercleara.jpg"
}
document.band.src = band
}
setInterval(switch(), 30000)
</script>
</head>

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm not certain since I don't have my usual references handy, but I think the setTimeout() and setInterval() methods expect a string to be evaluated as the first param.
I'd give

a try.
hth,
bear
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
that was it bear. it works fine now. thanks a lot.
oops...spoke too soon. the function gets called now but there is something wrong with my if statement it seems. the image will change from evercleara.jpg to everclearb.jpg but not back.
all i can think is it is trying to compare "c:\Everclear\everclearb.jpg" to "everclearb.jpg"
well i tried changing the line to
if (document.band.src == "C:\Everclear\everclearb.jpg") {
just to see but its not that
[ June 09, 2002: Message edited by: Randall Twede ]
[ June 09, 2002: Message edited by: Randall Twede ]
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
im not sure why it didnt work before but it works now


<head>
<script language="javascript">
band1 = new Image();
band1.src = "evercleara.jpg";
band2 = new Image();
band2.src = "everclearb.jpg";
photo = "evercleara.jpg"
function Switch() {
if (photo == "evercleara.jpg") {
photo = "everclearb.jpg"
}
else {
photo = "evercleara.jpg"
}
document.band.src = photo
}
setInterval("Switch()", 20000)
</script>
</head>


thanks for the help bear
 
Randall Twede
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
it is nowhere near complete but i uploaded what i have to my angelfire site for now. if you are curious to see how it turned out.
http://www.angelfire.com/games2/programming/everclear/music.html
i set the interval to 15 seconds 30 seconds was way too long.
the song samples don't work yet.
arg...i hate how angelfire puts extra space at the top...screwed it all up(at least at 800X600)...well a navigation bar is going to have the same effect(sigh)...i like to not have to scroll...i have to set width of first <td> in each row i see also..so it loads better.
well i fixed the loading problem...enough for one night i have a final exam tommorrow i should have studied today instead of making a website..oh well i will get an "A" anyway
[ June 10, 2002: Message edited by: Randall Twede ]
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic