Jump to content

js/php file name? js to animate?


paulmo

Recommended Posts

1)with a file that has both embedded php and javascript code, do i save as .php or .js? 2) have read js tutorial, understand terms variable/value object/property, wondering where to begin to animate an image, gif, and have it do things like open a door, talk to user, etc. the tutorial has examples for submit boxes and dates but nothing that's animated except a button that changes color on mouse hover. thanks

Link to comment
Share on other sites

1. .php<script type="text/javascript" src="js.php"></script>It will be best in the file if you have this line on the very top of it:<?php header('Content-type: text/javascript'); ?>By default PHP will send text/html.2. Javascript doesn't do image animation. You can use an image program to create an animated image file, or you can generate one with PHP as well. I've never generated an animated gif with PHP but I know you can create your own Flash movies with PHP.

Link to comment
Share on other sites

@moneytree: I my post in the "Critiques" section I was meaning that you can use JavaScript to make the animated images dynamic - e.g. move around the page.

Link to comment
Share on other sites

@moneytree: I my post in the "Critiques" section I was meaning that you can use JavaScript to make the animated images dynamic - e.g. move around the page.
thanks for the responses--yes, i need to make the gif move around the page. where do i go to learn how to do that with javascript? submit boxes, calculators etc do not seem to offer that kind of direction. thanks again
Link to comment
Share on other sites

You can make the image position:abolute then modify its top and left style attributes, perhaps using a timeout or interval between shifts.

Link to comment
Share on other sites

Here's an example that moves a blue box around in a circle:

<html>  <head>	<title>JS Sine</title>	<script type="text/javascript">	var nr = 0;	function moveit()	{	  pos1 = (Math.sin(nr/10) * 50) + 100;	  pos2 = (Math.cos(nr/10) * 50) + 100;	  document.getElementById("moveit").style.top = pos1;	  document.getElementById("moveit").style.left = pos2;	  setTimeout('moveit()', 50);	  nr++;	}	</script>  </head>  <body onload="moveit();">	<div id="moveit" style="width: 100px; height: 100px; background: blue; position: absolute; top: 0; left: 0;"> </div>  </body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...