HTML. Javascript. DHTML. CSS. Code examples. Element motion.

Login form

Home

HTML. Javascript. DHTML. CSS. Code examples. Element motion.

HOW TO CREATE MOTION USING JAVASCRIPT?

1. Absolute position:
<IMG src="/rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1" >
Code: CSS method.

2. Control ID:<script language = javascript>
function www(uuu){
alert ("id of current element is:" +uuu);
}
</script>
...
<IMG onmouseover="www(this.id);" src="/rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%;">

Code: Javascript control ID.

3. Useage of getElementsById and top:
.....

function www(uuu){
var el = document.getElementById("bounce");
el.style.top =40* parseInt(uuu.substr(1,1));
//alert(parseInt(uuu.substr(1,1)));
}
.....
<IMG src="/rut5.gif" width="53" height="53" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1">
.....
<a id = a1 href="#" onmouseover= "www(this.id);" >Javascript DHTML - Move mouse here</a>
Code: Javascript. Change of position:

4. Another case:
<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>
</HEAD>

<BODY onmouseover = "">
<script>
function doSomething(e) {
if (!e) var e = window.event;

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3)     targ = targ.parentNode;// defeat Safari bug

var el;
el = document.getElementById("bounce");
if ( "A" == targ.tagName){   el.style.top =40* parseInt(targ.id.substr(1,1)); }
//alert('Event type is ' + e.type + ' ' + targ.tagName )
}

var old = (window.onload) ? window.onload : function () {};

window.onload = function () {
old();
if (!document.getElementById) return;
document.getElementById('example').onmousemove = doSomething;

}

</script>
<IMG src="/rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1">

<p align="center" id="example">
<a id = a1 href="#" >Javascript DHTML - Move mouse here</a>
.......
.......
<a href="#" id = a7 onclick="window.back();"> BACK - ATGAL </a>
</p>

</BODY>
</HTML>
Code: Javascript. Motion of element.

Properties top and left:, setInterval. Possible to use setTimeout:
<SCRIPT language="JavaScript1.2">

var x = 80;
var y = 80;
var offsetx = 10;
var offsety = 10;
var limit = 50;

function bounceIt() {

var el = document.getElementById("bounce");
x += offsetx;
y += offsety;
if ((x >= 200) ||
(x <= 0 ) ){
offsetx = -offsetx;
}
if ((y>= 200) ||
(y <= 0)) {
offsety = -offsety;
}
el.style.left= x;
el.style.top = y;
}
</SCRIPT>

....
<BODY onload="window.tm = setInterval('bounceIt()', 102);" onunload=clearInterval(window.tm); >

....
Code:
Javascript. Motion of element.
Javascript. bad positions.
Javascript. sin().

Final:
Javascript ART.