We can move an image to different location by using buttons. The present location of the image can be collected by using offsetLeft and offsetTop values. To this value we will add a step value which sets the new position of the image. We will assign the new value to image by style property.
Working:
Write a html 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.Here, we do not accept input directly from the user. We have removed the html form using html 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.
(document).ready(function() {
var width = (document).width();
function goRight() {
("#animate").animate({
left: width
}, 5000, function() {
setTimeout(goLeft, 50);
});
}
function goLeft() {
("#animate").animate({
left: 0
}, 5000, function() {
setTimeout(goRight, 50);
});
}
setTimeout(goRight, 50);
});