Animate Picture

JS Newbie · 12-19-2012, 12:48 PM

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>

niralsoni · 12-19-2012, 01:58 PM

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

It should be

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

JS Newbie · 12-19-2012, 02:19 PM

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>

sunfighter · 12-19-2012, 02:42 PM

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>

JS Newbie · 12-19-2012, 02:54 PM

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>

JS Newbie · 12-19-2012, 10:16 PM

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>