www.webdeveloper.com
Results 1 to 8 of 8

Thread: Auto Refresh an Image only

  1. #1
    Join Date
    Nov 2012
    Posts
    3

    Post Auto Refresh an Image only

    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>

    ________________________________________________________________

    <iframe src="autorefresh.html" name="frm-content" frameborder="0" marginheight="0" marginwidth="1" scrolling="no" width="100%" style="border-style: solid; border-width: 0px" align="center" height="220" />
    </iframe>


    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.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    <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>

  3. #3
    Join Date
    Nov 2012
    Posts
    3

    Wink

    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

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    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.

  5. #5
    Join Date
    Nov 2012
    Posts
    4
    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-embe...13.html#p43654

    Don

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    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")
    ( 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.

    live demo

    index.php
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
    body{text-align:center;}
    div{padding:10px;}
    img{border:2px solid #fff;border-radius:7px;}
    </style>
    <script>
    var to = 3;
    
    function gogo(){
    var d=new Date(),
        dummy=d.getTime(),
    	i=0,
    	pix=document.images;
    for(; i < 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+'&'+dummy);
    obj.setAttribute('title',pure_src+'&'+dummy);
    obj.nextSibling.innerHTML=obj.getAttribute('src');
    }
    }
    setTimeout(gogo,to*1000);
    }
    
    onload=gogo;
    </script>
    </head>
    <body>
    <img src="thumbs.php?im=img/p1.jpg&wd=200&ht=200&x=x" class="refr" alt="" /><div></div>
    <img src="thumbs.php?im=img/p2.jpg&wd=200&ht=200&x=x" class="refr" alt="" /><div></div>
    <img src="thumbs.php?im=img/p3.jpg&wd=200&ht=200&x=x" class="norefr" alt="" /><div></div>
    </body>
    </html>
    thumbs.php
    Code:
    <?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] < $w) && ($size_img[1] < $h)){
    $w = $size_img[0];
    $h = $size_img[1];
    }
    
    $src_ratio = $size_img[0]/$size_img[1];
    if($ratio < $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);
    ?>
    Last edited by Padonak; 03-29-2014 at 02:56 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Nov 2012
    Posts
    4
    Quote Originally Posted by Padonak View Post
    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.

    live demo

    source
    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/sh...23#post1322723

    Don

  8. #8
    Join Date
    Nov 2012
    Posts
    4
    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>
    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

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles