CODEWITHSUNDEEP
javascripthtml
Robert John Concepcion
Robert John Concepcion

Reputation: 237

Auto refresh the src attribute of an IMG

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='css/style.css'>
        <base href='http://150.20.1.30'><base target='_self'>
            <title>PLC</title>
        <script>
            function change(pic){
            element_buts=document.getElementById("pic");
                element_buts.src=pic;       
            }
        </script>
    </head>
    <body>
        <div class='content'>
            <div class='left'>
                <img src='1.jpg' height='80%' id='pic'>
            </div>
            <div class='right'>
                <input type='button' class='buttons' value='PLC' onclick='change("1.jpg")'></br>
                <input type='button' class='buttons' value='Furnace Draft' onclick='change("9.jpg")'></br>
                <input type='button' class='buttons' value='Drum Level Graph' onclick='change("3.jpg")'></br>
                <input type='button' class='buttons' value='Boiler Blowdown Time Setup' onclick='change("10.jpg")'></br>
                <input type='button' class='buttons' value='Steam Press and Flow Graph' onclick='change("4.jpg")'></br>
                <input type='button' class='buttons' value='Boiler Drum and Dearator Level' onclick='change("5.jpg")'></br>
                <input type='button' class='buttons' value='Stack and Dearator Temperature' onclick='change("7.jpg")'></br>
                <input type='button' class='buttons' value='Steam Flow and Pressure Graphs' onclick='change("8.jpg")'></br>
                <div class='footer_right'>  
                </div>
            </div>
        </div>
    </body>
</html>

above is my html and javascript code my reference of that function is http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb what on this code is when you click the button the image inside <div class='right'> will be change prior to the value of function change(), my problem is what code or function that i need to put inorder the image will refresh or auto refresh, sample i lastly click the PLC button, i need a continuous refresh in order the 1.jpg pic shows an updated image. thx sorry im a newbie in java script thx

Upvotes: 1

Views: 3822

Answers (2)

German Latorre
German Latorre

Reputation: 11158

I don't know if I 100% understood your question, but if you need an image to be refreshed every N seconds, you must change its URL by adding a question mark (?) and some random stuff after it (for instance a timestamp).

This code would work for you:

// Let's set refresh time to 5 seconds
var N = 5;

// Function that refreshes image
function refresh(imageId, imageSrc) {
    var image = document.getElementById(imageId);
    var timestamp = new Date().getTime();
    image.src = imageSrc + '?' + timestamp;       
}

// Refresh image every N seconds
setTimeout(function() {
    refresh('pic', 'myImage.jpg');
}, N * 1000);

Upvotes: 2

gkiely
gkiely

Reputation: 3007

Just looking at it, I'm pretty sure your code works. Well I know this does.

<img id="pic" src="https://www.google.com.au/images/srpr/logo4w.png"/>
<input type="button" value ="Yahoo" onclick="change('http://l.yimg.com/ao/i/mp/properties/frontpage/eclipse/img/y7-logo_default.v1.png')" />
<input type="button" value ="Google" onclick="change('https://www.google.com.au/images/srpr/logo4w.png')" />    

<script>
    function change(src){
       document.getElementById('pic').src = src;
    }
</script>

Upvotes: 0

Related Questions