/    Sign up×
Community /Pin to ProfileBookmark

Image refresh

Copy linkTweet thisAlerts:
Mar 14.2005

How would one go about getting an time image to refresh itself lets say every 60sec?

<a href=”http://www.mywebsite.com“>
<img src=”http://www.mywebsite.com/image01.gif“
alt=”Local Time” height=41 width=127></a>

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaMar 14.2005 — [font=trebuchet ms]Maybe try the following... I don't think there is a "reload" method for an image.[/font]

<i>
</i>&lt;script type="text/javascript"&gt;&lt;!--
onload = function(){setTimeout('document.images["timeImg"].src=document.images["timeImg"].src', 60000)};
//--&gt;&lt;/script&gt;


<i>
</i>&lt;img src="http://www.site.com/image.gif" alt="The current time is 10pm." name="timeImg"&gt;
Copy linkTweet thisAlerts:
@ranosbauthorMar 14.2005 — Nice try, but no refresh...Kinda like the way a clock updates every second principle...
Copy linkTweet thisAlerts:
@JonaMar 14.2005 — [font=trebuchet ms]Maybe replace the node with a new one?[/font]

<i>
</i>&lt;script type="text/javascript"&gt;&lt;!--
if(document.getElementById) onload = function(){
var obj = document.getElementById('timeImg');
document.getElementsByTagName("BODY")[0].replaceChild(obj, document.createElement("IMG").setAttribute("SRC", "http://www.site.com/image.gif"));
}
//--&gt;&lt;/script&gt;


<i>
</i>&lt;img src="http://www.site.com/" alt="The time is 11pm." id="timeImg"&gt;
Copy linkTweet thisAlerts:
@ranosbauthorMar 14.2005 — Still not refreshing...Heres the actually code:

<script type="text/javascript"><!--

if(document.getElementById) onload = function(){

var obj = document.getElementById('timeImg');

document.getElementsByTagName("BODY")[0].replaceChild(obj, document.createElement("IMG").setAttribute("SRC", "http://banners.wunderground.com/banner/gizmotimetemp_both/language/www/global/stations/98327.gif"));

}

//--></script>


<a href="http://www.wunderground.com/global/stations/98327.html" Target="_blank">

<img src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/www/global/stations/98327.gif" alt="Clark Air Base, Philippines Forecast" height=41 width=127" id="timeImg"></a>
Copy linkTweet thisAlerts:
@JonaMar 14.2005 — [font=trebuchet ms]This work?[/font]

<i>
</i>&lt;script type="text/javascript"&gt;&lt;!--
function reloadImg(){
document.images["timeImg"].src = "http://banners.wunderground.com/banner/gizmotimetemp_both/language/www/global/stations/98327.gif?x="+(Math.random()*999);
}

window.setTimeout('reloadImg()', 3000);
//--&gt;&lt;/script&gt;

&lt;a href="http://www.wunderground.com/global/stations/98327.html" Target="_blank" id="timeLink"&gt;
&lt;img src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/www/global/stations/98327.gif" alt="Clark Air Base, Philippines Forecast" height=41 width=127" name="timeImg"&gt;&lt;/a&gt;
Copy linkTweet thisAlerts:
@ranosbauthorMar 14.2005 — Same results...Hmmm..Is this not possible?
Copy linkTweet thisAlerts:
@JonaMar 14.2005 — [font=trebuchet ms]Strange. I think I [url=http://www.surveyorcorp.com/support/webcam32help/guides/dhtml.html]found a resource on this[/url], but I didn't test it to see if it works or not.[/font]
Copy linkTweet thisAlerts:
@PittimannMar 14.2005 — Hi!

If you call the function onload and put the setTimeout inside the function, it will work. Apart from that, inside the image tag you have an annoying '[COLOR=red]"[/COLOR]':

height=41 width=127[COLOR=red]"[/COLOR]

which you should remove (or better: quote everything properly).

Cheers - Pit
Copy linkTweet thisAlerts:
@ranosbauthorMar 15.2005 — From Jona's

Does not reload...


<HTML>

<HEAD>

<script LANGUAGE="JavaScript">

<!--

function reloadImg()

{

uniq = new Date();

uniq = "?"+uniq.getTime();

newImage = document.all.imgToLoad.src;

index = newImage.indexOf("?", 0);

if (index > 0)

{

newImage = newImage.substr(0, index);

}

document.all.imgToLoad.src = newImage+uniq;

}

// -->

</script>

</HEAD>

<body onload="reloadImg()">

<!-- Weather -->

<a href="http://www.wunderground.com/global/stations/98327.html"

Target="_blank">

<img

src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/www

/global/stations/98327.gif" alt="Clark Air Base, Philippines Forecast"

height=41 width=127 id="imgToLoad"></a>

<!-- Weather -->

</body></html>
Copy linkTweet thisAlerts:
@JonaMar 15.2005 — [font=trebuchet ms]This works.[/font]

<i>
</i>&lt;HTML&gt;
&lt;HEAD&gt;
&lt;script LANGUAGE="JavaScript"&gt;
&lt;!--
function reloadImg(){
uniq = new Date();
uniq = "?"+uniq.getTime();
newImage = document.images['imgToLoad'].src;
index = newImage.indexOf("?", 0);
if(index &gt; 0){
newImage = newImage.substr(0, index);
}
document.images['imgToLoad'].src = newImage+uniq;
setTimeout('reloadImg()', 3000);
}
// --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;
&lt;body onload="reloadImg()"&gt;
&lt;a href="http://www.wunderground.com/global/stations/98327.html" Target="_blank"&gt;
&lt;img src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/www/global/stations/98327.gif" alt="Clark Air Base, Philippines Forecast" height="41" width="127" name="imgToLoad"&gt;&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
Copy linkTweet thisAlerts:
@ranosbauthorMar 15.2005 — Hats off to Jona ladies and gents...

That works nice, Great work-

You used setTimeout at the end of function reloadImg()

instead of the original function countDown()

and changed some of the reloading script...

And changing the setTimeout to every 60sec, same as the source...

setTimeout('reloadImg()', 60000);

New to JavaScript but learning everyday...
Copy linkTweet thisAlerts:
@JonaMar 15.2005 — [font=trebuchet ms]Glad it works for you.[/font]
Copy linkTweet thisAlerts:
@HazelbyJun 23.2006 — this script works perfectly if the image file is sitting on the same server for all browsers, which is awesome. but i have a webcam file that is sitting on an ftp server that breaks in IE and Opera. of course it works in Firefox and Netscape fine, but in IE and Opera the refreshed image name appears like:

ftp://ftp.server.com/webcam/image_cam.jpg?1151080026362

for whatever reason IE and Opera are appending the random number to the end of the filename on the refresh. why would this only happen when using the ftp server as the source destination?
×

Success!

Help @ranosb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...