Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Animate Picture

  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Animate Picture

    Hi, Trying to get this function (Animate()) working but I cannot get it right

    I basically want to change the image on the page when the 'var =' a '1' or '0'

    any help appreciated.

    Code:
    <!DOCTYPE html>
    
    <HTML><HEAD>
    
    <script language="javascript">
    
    var img0 = new Image();
    img0.src = "http://www.XXX/BC_Webserver/Image/MTU 2.5MVA.gif";
    
    var img1 = new Image();
    img1.src = "http://www.XXX/BC_Webserver/Image/3516.gif";
    
    
    var i = 0;
    var CB = document.getElementById('Pic'); // is this ok? I have created new id Pic for Var CB
    
    
    
    //***************
    
    function animate() 
    {
    document.getElementById('bar').value=i;
    
    if (i == 0) 
    {
    CB.src=img0.src;
    document.getElementById('Pic').value=CB.src; // update Pic ID with value from CB.scr?
    }
    else
    {
    CB.src=img1.src;
    document.getElementById('Pic').value=CB.src; // update Pic ID with value from CB.scr?
    }
    window.setInterval("animate()",2000);
    
    }
    
    //***************
    
    function On() 
    {
    i = 1;
    document.getElementById('bar').value=i;
    }
    
    //***************
    
    function Off() 
    {
    i = 0;
    document.getElementById('bar').value=i;
    }
    
    </SCRIPT>
    
    </HEAD>
    
    <BODY onLoad="animate();">
    
    <input type=button onClick="On()" value="On">
    <input type=button onClick="Off()" value="Off">
    <input type=button onClick="animate()" value="Animate">
    
    <input type="text" id="bar" value=" "width=30 height=30>
    
    
    <IMG src="" alt="" id="Pic" width=300 height=234> // update scr ID with value from Pic?
    
    
    </BODY>
    </HTML>

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    document.getElementById('Pic').value=CB.src ???

    It should be

    document.getElementById('Pic').src=CB.src

  • Users who have thanked niralsoni for this post:

    JS Newbie (12-19-2012)

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi Thanks for spotting that .

    I have amended the code but it still doesn't load an image although it looks like its trying..... so close!!

    I think the error is in this line var CB = ""; //document.getElementById('Pic').scr = 0;

    Code:
    <!DOCTYPE html>
    
    <HTML><HEAD>
    
    <script language="javascript">
    
    var img0 = new Image();
    img0.src = "http://www.bcsys.co.uk/BC_Webserver/Image/MTU 2.5MVA.gif";
    
    var img1 = new Image();
    img1.src = "http://www.bcsys.co.uk/BC_Webserver/Image/3516.gif";
    
    
    var i = 0;
    var CB = ""; //document.getElementById('Pic').scr = 0;
     
    
    
     //***************
    
    function animate() 
    {
    document.getElementById('bar').value=i;
    
    if (i == 0) 
    {
    CB.src=img0.src;
    document.getElementById('Pic').src=CB.src
    }
    else
    {
    CB.src=img1.src;
    document.getElementById('Pic').src=CB.src
    }
    window.setInterval("animate()",2000);
    
    }
    
    //***************
    
    function On() 
    {
      i = 1;
      document.getElementById('bar').value=i;
    }
    
    //***************
    
    function Off() 
    {
      i  = 0;
      document.getElementById('bar').value=i;
    }
    
    </SCRIPT>
    
    </HEAD>
    
    <BODY onLoad="animate();">
    
    <input type=button onClick="On()" value="On">
    <input type=button onClick="Off()" value="Off">
    <input type=button onClick="animate()" value="Animate">
    
    <input type="text" id="bar" value=" "width=30 height=30>
    
    
    <IMG src="" alt="" id="Pic" width=300 height=234>
    
    
    </BODY>
    </HTML>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,690
    Thanks
    25
    Thanked 656 Times in 655 Posts
    In addition to the above, I think document.getElementById('bar').value=i; is suspect and that you mean
    i = document.getElementById('bar').value;

    Really don't know what window.setInterval("animate()",2000); is doing to help things so I removed it for this simplified version:
    Code:
    <!DOCTYPE html>
    <html><head>
    <script>
    function animate() 
    {
    	i = document.getElementById('bar').value;
    	if (i == 0) 
    	{
    		document.getElementById('pic').src = "http://www.XXX/BC_Webserver/Image/MTU 2.5MVA.gif"; 
    	}else{
    		document.getElementById('pic').src = "http://www.XXX/BC_Webserver/Image/3516.gif"; 
    	}
    }
    </script>
    </head>
    
    <body onload="animate();">
    <input type=button onclick="document.getElementById('bar').value=1;" value="on">
    <input type=button onclick="document.getElementById('bar').value=0;" value="off">
    <input type=button onclick="animate()" value="animate">
    <input type="text" id="bar" value="" width=30 height=30>
    <img src="" alt="" id="pic" width=300 height=234>   <!--  // update scr id with value from pic?-->
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    JS Newbie (12-19-2012)

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    When the code works i want the images to change based on a var without using the input buttons so i added the window.setInterval("animate()",2000) to re- call the animate function every 2 seconds once it has been called - not sure if this is right though!

    seems to work ok when i add it back in
    Code:
    <!DOCTYPE html>
    <html><head>
    <script>
    function animate() 
    {
    	i = document.getElementById('bar').value;
    	
    	if (i == 0) 
    	{
    		document.getElementById('pic').src = "http://www.xx.uk/BC_Webserver/Image/MTU 2.5MVA.gif"; 
    	}else{
    		document.getElementById('pic').src = "http://www.xx.uk/BC_Webserver/Image/3516.gif"; 
    	}
    	//window.setInterval("animate()",2000)
    }
    </script>
    </head>
    
    <body onload="animate();">
    <input type=button onclick="document.getElementById('bar').value=1;" value="on">
    <input type=button onclick="document.getElementById('bar').value=0;" value="off">
    <input type=button onclick="animate()" value="animate">
    <input type="text" id="bar" value="" width=30 height=30>
    <img src="" alt="" id="pic" width=300 height=234>   <!--  // update scr id with value from pic?-->
    </body>
    </html>
    Last edited by JS Newbie; 12-19-2012 at 11:12 PM.

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    Got it working thanks to all your help

    Code:
    <script>
    
    function animate() 
    {
    i = document.getElementById('bar').value;
    
    if (i == 1) 
    {
    document.getElementById('pic').src = "http://www.xx.uk/BC_Webserver/Image/CB_Closed.png"; 
    }else if (i == 2)
    {
    document.getElementById('pic').src = "http://www.xx.uk/BC_Webserver/Image/CB_Tripped.png"; 
    }
    else{
    document.getElementById('pic').src = "http://wwwxx.uk/BC_Webserver/Image/CB_Open.png"; 
    }
    
    
    }
    
    </script>
    
    <input type=button onclick="document.getElementById('bar').value=1;" value="On">
    <input type=button onclick="document.getElementById('bar').value=0;" value="Off">
    <input type=button onclick="document.getElementById('bar').value=2;" value="Trip">
    
    <input type=button onclick="animate()" value="animate">
    <input type="text" id="bar" value="" width=30 height=30> 
    
    <img src="" alt="" id="pic" width=40 height=40>


  •  

    Posting Permissions

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