Moving Image by buttons using offsetWe 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. We will use four buttons ( left, right, top , bottom ) to set the direction of movement of the image.
In above code we first read the vertical coordinate value of the image and store it in variable x. As we are moving up so we will subtract step value from x . Now we can re-position the image by updating the new style.top value. Here is the complete code.
The above code moves the image in steps, we can further improve the script to give continues movement to the image. It is like dropping the image from a height. We will learn in part II of moving image.
This article is written by plus2net.com team.
Image SlideShow Script using navigational buttons
Image Loading to cache while page load by Image object
Reloading the image without refreshing the page
Image Rotator Script for automatic Slideshow
Image Move across by button click
Image Move continuously across screen
Image offSetLeft and offSetTop to get position of the image from left and top
Image Position : Positioning an image by assigning value to style.top and style.left
Image width: Managing width of the image
Image height: managing height of the image
Image align: Image align left or right
Image border: adding and removing border from Image
Image alt: updating or reading alt message of image