Auto Refresh an Image only

@matvelNov 25.2012

Hi All,

I am a newbie in webprogramming, but need to use an autorefresh image script. At the moment I am using this code_

<head>
<style type=”text/css”>
.style1 {
text-align: center;
}
</style>
</head>
<hr>
<body style=”color: #FFFFFF; background-color: #F3F3F3″>
<div class=”style1″>
<IMG src=”IMAGE URL HERE” border=”1″ name=”refresh”>
<SCRIPT language=”JavaScript” type=”text/javascript”>
var t = 20 // Interval in Seconds
image = “IMAGE URL HERE” //URL of the Image
function Start() {
tmp = new Date();
tmp = “?”+tmp.getTime()
document.images[“refresh”].src = image+tmp
setTimeout(“Start()”, t*1000)
}
Start();
</SCRIPT> </div>

________________________________________________________________

This is working fine for one image, but how can I apply this script to multiple images on the same page?? I need to auto refresh 10 images.. Any help will be highly appreciated.

to post a comment

JavaScript

7 Comments(s) _↴

@ZABINov 26.2012 — #<IMG src="IMAGE URL HERE" border="1" name="refresh" id="img1">

<IMG src="IMAGE URL HERE" border="1" name="refresh" id="img2">

<IMG src="IMAGE URL HERE" border="1" name="refresh" id="img3">

<SCRIPT language="JavaScript" type="text/javascript">

var t = 20 // Interval in Seconds

images = new Array('1.jpg','2.jpg','3.jpg'); //URLs of the Images

function Start() {

tmp = new Date();

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

for (i=1;i<image.length;i++){

document.getElementById("img"+i).src = images[i]+tmp;

}

setTimeout("Start()", t*1000)

}

Start();

</SCRIPT>

@matvelauthorNov 26.2012 — #Thanks ZABI for your reply and for your help.. I have applied the code in this case;

<IMG src="imgcam/mostasquare_1.jpg" border="1" name="refresh" id="img1">

<IMG src="imgcam/mriehelbypass_1.jpg" border="1" name="refresh" id="img2">

<SCRIPT language="JavaScript" type="text/javascript">

var t = 35 // Interval in Seconds

images = new Array('../imgcam/mostasquare_1.jpg','../imgcam/mriehelbypass_1.jpg'); //URLs of the Images

function Start() {

tmp = new Date();

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

for (i=1;i<image.length;i++){

document.getElementById("img"+i).src = images[i]+tmp;

}

setTimeout("Start()", t*1000)

}

Start();

</SCRIPT>

________________________________________________________________

<iframe id="img1" src="autorefresh.html" name="img1" frameborder="0" marginheight="0" marginwidth="1" scrolling="no" width="460" height="345" /></iframe>

<iframe id="img2" src="autorefresh.html" name="img2" frameborder="0" marginheight="0" marginwidth="1" scrolling="no" width="460" height="345" /></iframe>

I am seeing the same image for both iFrames.. Sorry for this but I have no knowlede in programming.. Many thanks for your time and help

@ZABINov 27.2012 — #what basically you want to achieve ?

what are those iframes for ? as far as your question i understood your question that you want to refresh images. you just need only img elements not iframes.

@TheUberOverLordMar 29.2014 — #This does what you want using one line of HTML and includes error recovery and there is a working demo shown here:

http://foscam.us/forum/a-how-to-embed-any-foscam-ip-camera-in-webpage-using-1-line-t9113.html#p43654

Don

@PadonakMar 29.2014 — #looks like this trick can't be done with images because:

The URL of the image.

Possible values:

An absolute URL - points to another web site (like src="http://www.example.com/image.gif")

A relative URL - points to a file within a web site (like src="image.gif")
[/quote]

( http://www.w3schools.com/tags/att_img_src.asp )

an image file is not a script/html/etc. file and it can't recieve variables ))

i would try doing it with php-generated images. in this case src attribute will point not to an image but to a script file which of course can receive variables.

[B][COLOR="#FF0000"]live demo[/COLOR][/B]

[B][I]index.php[/I][/B]

<i>
 </i>&lt;!doctype html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;title&gt;title&lt;/title&gt;
 &lt;style&gt;
 body{text-align:center;}
 div{padding:10px;}
 img{border:2px solid #fff;border-radius:7px;}
 &lt;/style&gt;
 &lt;script&gt;
 var to = 3;
 
 function gogo(){
 var d=new Date(),
 dummy=d.getTime(),
 i=0,
 pix=document.images;
 for(; i &lt; pix.length; i++){
 if(pix[i].className!=='refr'){continue;}
 else{
 var obj = pix[i],
 s_rc=obj.getAttribute('src'),
 pure_src = s_rc.substring(0,s_rc.indexOf('x=x')+3);
 obj.setAttribute('src',pure_src+'&amp;'+dummy);
 obj.setAttribute('title',pure_src+'&amp;'+dummy);
 obj.nextSibling.innerHTML=obj.getAttribute('src');
 }
 }
 setTimeout(gogo,to*1000);
 }
 
 onload=gogo;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;img src="thumbs.php?im=img/p1.jpg&amp;wd=200&amp;ht=200&amp;x=x" class="refr" alt="" /&gt;&lt;div&gt;&lt;/div&gt;
 &lt;img src="thumbs.php?im=img/p2.jpg&amp;wd=200&amp;ht=200&amp;x=x" class="refr" alt="" /&gt;&lt;div&gt;&lt;/div&gt;
 &lt;img src="thumbs.php?im=img/p3.jpg&amp;wd=200&amp;ht=200&amp;x=x" class="norefr" alt="" /&gt;&lt;div&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[B][I]thumbs.php[/I][/B]

<i>
 </i>&lt;?php
 $img = $_GET['im'];
 if(empty($_GET['wd'])){$wd = 30;}
 if(empty($_GET['ht'])){$ht = 30;}
 else{
 $wd = $_GET['wd'];
 $ht = $_GET['ht'];
 }
 
 function tb_maker($filename, $w, $h){
 $ratio = $w/$h;
 $size_img = getimagesize($filename);
 
 if(($size_img[0] &lt; $w) &amp;&amp; ($size_img[1] &lt; $h)){
 $w = $size_img[0];
 $h = $size_img[1];
 }
 
 $src_ratio = $size_img[0]/$size_img[1];
 if($ratio &lt; $src_ratio) $h = $w/$src_ratio;
 else $w = $h*$src_ratio;
 $dest_img = imagecreatetruecolor($w, $h);
 if($size_img[2] == 2) $src_img = imagecreatefromjpeg($filename);
 else if($size_img[2] == 1) $src_img = imagecreatefromgif($filename);
 else if($size_img[2] == 3) $src_img = imagecreatefrompng($filename);
 if(!imagecopyresampled($dest_img, $src_img, 0, 0, 0, 0, $w, $h, $size_img[0], $size_img[1])) return false;
 
 $path_parts = pathinfo($filename);
 // output into browser
 if(($path_parts["extension"] == "jpg") || ($path_parts["extension"] == "jpeg")){
 header("Content-type: image/jpeg");
 imagejpeg($dest_img);
 }
 else if($path_parts["extension"] == "gif"){
 header("Content-type: image/gif");
 imagegif($dest_img);
 }
 else if($path_parts["extension"] == "png"){
 header("Content-type: image/png");
 imagepng($dest_img);
 }
 imagedestroy($dest_img);
 imagedestroy($src_img);
 clearstatcache();
 return true;
 }
 
 tb_maker($img, $wd, $ht);
 ?&gt;

@TheUberOverLordMar 29.2014 — #looks like this trick can't be done with images because:

( http://www.w3schools.com/tags/att_img_src.asp )

an image file is not a script/html/etc. file and it can't recieve variables ))

i would try doing it with php-generated images. in this case src attribute will point not to an image but to a script file which of course can receive variables.

[B][COLOR="#FF0000"]live demo[/COLOR][/B]

[B][COLOR="#FF0000"]source[/COLOR][/B][/QUOTE]
Correct an image file is not a script/htmk/etc and it can't receive variables. Which is the entire reason it's a perfectly acceptable and valid thing to do to add on to the URL so that the browser does not pull a copy of the image from browser cache.

There is absolutely no reason to need php to do this. While it can be done, it's not required.

Not only can it be done there is a link to a live demo showing it working as it:

http://www.webdeveloper.com/forum/showthread.php?269125-Auto-Refresh-an-Image-only&p=1322723#post1322723

Don

@TheUberOverLordMar 29.2014 — #

[CODE]
 <!DOCTYPE HTML>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Embed IP Camera In Webpage And WebSite Using 1 Line Of Code </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
 setTimeout(function(){location.href="http://foscam.us/forum/post43654.html#p43654"}, 120000);
 </script>
 </head>
 <body>
 <img src="http://107.170.59.150/ipcam2.jpg?t=" width='160' onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='OneLineExample' />
 </body>
 </html>
 [/CODE]

The above works perfectly. Refreshing the image every 5 seconds and if there was an error retrying to get the image every 5 seconds as well. Which both values can be changed and are independent of each other.

So. Not sure why you thought/think this could not work, when it clearly does.

Don

Also in #JavaScript _↴

[RESOLVED] Printing the Contents of a Div Parse text variable from form to another page AJAX to POST form inputs to PHP to temporary TABLE

Success!

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

Tweet This

Auto Refresh an Image only

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Auto Refresh an Image only

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴