astralaaron Posted February 15, 2008 Share Posted February 15, 2008 Can you move an image or text on the screen with javascript?the only type of animation they showed on the w3school tutorials is a picture changing on mousover..,.what other types of animation can you do with javascript? Link to comment Share on other sites More sharing options...
Ingolme Posted February 15, 2008 Share Posted February 15, 2008 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 More sharing options...
jeffman Posted February 15, 2008 Share Posted February 15, 2008 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 More sharing options...
gajo da net Posted February 15, 2008 Share Posted February 15, 2008 HTML 5 = xhtml isn't? Link to comment Share on other sites More sharing options...
Ingolme Posted February 15, 2008 Share Posted February 15, 2008 No, HTML and XHTML don't have to do with eachother.HTML 5 is the next version of HTMLXHTML was supposed to be a successor of HTML. Link to comment Share on other sites More sharing options...
astralaaron Posted February 15, 2008 Author Share Posted February 15, 2008 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 More sharing options...
Ingolme Posted February 16, 2008 Share Posted February 16, 2008 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 More sharing options...
astralaaron Posted February 16, 2008 Author Share Posted February 16, 2008 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;"> thanks Link to comment Share on other sites More sharing options...
astralaaron Posted February 16, 2008 Author Share Posted February 16, 2008 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 More sharing options...
astralaaron Posted February 16, 2008 Author Share Posted February 16, 2008 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 More sharing options...
astralaaron Posted February 16, 2008 Author Share Posted February 16, 2008 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 More sharing options...
astralaaron Posted February 16, 2008 Author Share Posted February 16, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.