Jump to content

animation?


astralaaron
 Share

Recommended Posts

You can play with CSS using Javascript to make things move on the page, for example:<img src="something" alt="..." id="image" style="position: absolute";><script type="text/javascript">function move() { im = document.getElementById("image"); im.style.left = (im.offetLeft + 1) + "px"; setTimeout("move()",100);}move();</script>

Link to comment
Share on other sites

Check out this dude's site. Now be aware that HTML 5 will have drag and drop capability built right in. (I think IE already does?) Firefox 3 will have it, using routines based on the HTML 5 spec, though last time I checked the documentation was very thin.http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Link to comment
Share on other sites

I cant get your code working, ignolme..heres what mine looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><img src="on.gif" alt="test" id="image" style="position: absolute";><script type="text/javascript">function move() {im = document.getElementById("image");im.style.left = (im.offetLeft + 1) + "px";setTimeout("move()",100);}move()</script></body></html>

first i tried like that, and nothing at all happens.then I tried this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><script type="text/javascript">function move() {im = document.getElementById("image");im.style.left = (im.offetLeft + 1) + "px";setTimeout("move()",100);}</script><img src="on.gif" alt="test" id="image" onmouseOver="move()" style="position: absolute";></body></html>

nothing happens...i tried something else similar to the second codebox.. and on the bottom when I moused over it would say "errors on page"

Link to comment
Share on other sites

I always recommend to revise my examples and not simply copy and paste. This one has two errors:offetLeft instead of offsetLeft<img ... ... style="position: absolute";> instead of <img ... ... style="position: absolute;">

Link to comment
Share on other sites

how can I add another function for onmouseOut="" to make it move back to the original position?<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><script type="text/javascript">function move() {im = document.getElementById("image");im.style.left = (im.offsetLeft + 1) + "px";setTimeout("move()",100);}</script><img src="on.gif" alt="test" id="image" onmouseOver="move()" style="position: absolute";></body></html>

Link to comment
Share on other sites

i tried this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><script type="text/javascript">function move() {im = document.getElementById("image");im.style.left = (im.offsetLeft + 1) + "px";setTimeout("move()",100);}function back() {im = document.getElementById("image");im.style.left = (im.offsetLeft - 1) + "px";setTimeout("back()",100);}</script><img src="on.gif" alt="test" id="image" onmouseOver="move()" onmouseOut="back()" style="position: absolute";></body></html>

but it just starts shaking when i mouseOut

Link to comment
Share on other sites

I want to do something like this :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><script type="text/javascript">function a() {i=0;im = document.getElementById("image");while (i < 10) {im.style.left = (im.offsetLeft + 1) + "px";i = i+1;}}function b() {while (i > 1) {im.style.left = (im.offsetLeft - 1) + "px";i = i - 1;}}</script><img src="on.gif" alt="test" id="image" onmouseOver="a()" onmouseOut="b()" style="position: absolute";></body></html>

but i want the movement to be a smooth motion like if there is a way to set an interval for the while loop? so it doesnt jump all 10 spaces?

Link to comment
Share on other sites

i just tried this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><script type="text/javascript">function a() {i=0;im = document.getElementById("image");while (i < 10) {im.style.left = (im.offsetLeft + 1) + "px";i = i+1;setTimeout("a()",100);}}function b() {while (i > 1) {im.style.left = (im.offsetLeft - 1) + "px";i = i - 1;setTimeout("b()",100);}}</script><img src="on.gif" alt="test" id="image" onmouseOver="a()" onmouseOut="b()" style="position: absolute";></body></html>

and the image zooms out of screen and makes mozilla stop responding

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...