|
|
change the position of an image
Have you ever been to a page that has a flying banner? There are many uses for this catchy display option. Some take this to an extreme, but for now we’ll keep it simple. This is a great exercise to quickly understand dynamic positioning concepts.
We’ll use both absolute and relative positioning techniques. The first position is absolute and the second position is relative to the first absolute position. You can use an increment operator (++) to change the document co-ordinates by ones if you wish, or even jump in increments of ten (or any given number) with the addition operator (+). The style.left attribute is used to give the image position in pixels. You can state a static value here or you can use a variable or array item to arrive at the new co-ordinate through scripted action.
The image can be any dimension or format, as long as the format is supported by the browser. Changing the image dynamically is also a good effect.
We use the getElementById() method to access the display properties for that image. This includes its position on the page. The id attribute must be stated with the IMG tag to allow the browser to figure out what element is to be positioned.
<html>
<head>
<script type="text/javascript">
function moveleft() {
document.getElementById('image').style.position="absolute";
document.getElementById('image').style.left="0";
}
function moveback() {
document.getElementById('image').style.position="relative";
}
</script>
</head>
<body>
<img id="image" src="bulbon.gif" onmouseover="moveleft()" onmouseout="moveback()">
</body>
</html>
To change back to the original position, a relative positioning method is used. It calls the original location of the image on the page and acts accordingly. If you’re going to move an image within a table in the page, you must account for the area that the image will be moved within or the table will automatically alter to fit the new image position. For example, if you were to move a 100 pixel wide image 10 pixels in both directions you would have to have a space given in the TD element containing it to be 120 pixels wide – 10 pixels to the left, 10 pixels to the right and the original 100 pixel wide image.
|
|
