Write a xHTML program to take input from the user and move the image to the corresponding location(position), using Javascript.
Note: ( CSS – Cascading StyleSheet )
Static Positioning does not have top and left properties, so an image which is positioned as Static can’t be moved.
Absolute positioning: The image moves to the new location according to the values of top and left.
Relative positioning: Here the image moves relative to its original position. From its original position, it applies the new top and left value and moves accordingly.
Video Explaining The Code:
Write a xhtml program, and use the form input tags and accept two values from the user. Using document.getElementById, get those user entered values and assign it to two variables.
Similarly, using the div tags id, change the style information and assign the user entered values to div tags top and left position whenever user hits the “move” button.
Source Code: (move.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html>
<head><title> Move Image </title>
<style type="text/css">
#kids { position: relative; top: 200px; left: 400px; }
</style>
<script type="text/javascript">
function moveIt()
{
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var kids = document.getElementById("kids").style;
kids.top = x + "px";
kids.left = y + "px";
}
</script>
</head>
<body>
<form>
X axis: <input type="text" id="x"><br />
Y axis: <input type="text" id="y"><br />
<input type="button" value=" Move " onclick="moveIt()" >
</form>
<div id="kids">
<img
src="http://technotip.org/wp-content/themes/NewsDen/images/logo.gif"
width="220" height="42">
</div>
</body>
</html> |
Fun Application Code:
We have made some minor changes to the above code to get the x and y co-ordinates from the cursor position automatically.
Here, we do not accept input directly from the user. We have removed the html form using html comments(
<!-- Comments --> |
) and invoke the javascript function moveIt when the user moves his mouse on the html document.
When there is onmousemove event, most browsers automatically throw some objects and we accept it in our function(as parameter) and make use of it. Some browsers like Microsoft’s Internet Explorer do not throw the event object automatically, so we assign it manually using the below code
if( !evnt ) evnt = window.event; |
Explanation of above two lines of code:
If evnt does not exist, then assign the event to evnt variable.
Also Make Sure To Watch This Video: Event Object: Javascript
Now using the clientX and clientY or screenX and screenY property of the event object, we track the x and y co-ordinates of the cursor and assign that value to the top and left position of the image(div tag which wraps the image tag).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html>
<head><title> Move Image </title>
<style type="text/css">
#kids { position: relative; top: 200px; left: 400px; }
#x, #y { font-size: 24pt; color: red; }
</style>
<script type="text/javascript">
document.onmousemove = moveIt;
function moveIt(evnt)
{
if( !evnt )
evnt = window.event;
var x = evnt.clientX;
var y = evnt.clientY;
var kids = document.getElementById("kids").style;
kids.top = x + "px";
kids.left = y + "px";
document.getElementById("x").innerHTML = x;
document.getElementById("y").innerHTML = y;
}
</script>
</head>
<body>
X:<span id="x"></span><br />
Y:<span id="y"></span>
<!--
<form>
X axis: <input type="text" id="x"><br />
Y axis: <input type="text" id="y"><br />
<input type="button" value=" Move " onclick="moveIt()" >
</form>
-->
<div id="kids">
<img
src="http://technotip.org/wp-content/themes/NewsDen/images/logo.gif"
width="220" height="42">
</div>
</body>
</html> |
Hence, whenever the user move his mouse pointer over the html document the image starts moving according to the new value generated for the each move.
