Moving Objects by a Certain Amount


Moving an object from one precise point to another (as shown in the previous section) is very useful, but to do this you have to know exactly where it is you want to move the object. Often, though, you simply want the object to move by a certain amount from its current location. To do this, you'll first need to find the location of the object and then add to that the amount by which you want to move it.

In this example (Figure 16.8), every time visitors hover over the link, the Mad Hatter staggers forward. Every time they move back off the link, the Mad Hatter staggers back some.

Figure 16.8. The Mad Hatter is now staggering for a new cup of tea.


To change the position of an object by a certain amount:

1.

function moveObjectBy(objectID, deltaX, deltaY) {...}


Add the function moveObjectBy() to your JavaScript (Code 16.5).

Code 16.5. The moveObjectBy() function changes the position of the designated object in the browser window by a certain amount every time the mouse pointer rolls onto and then off the link.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Moving Things By a Certain Amount</title> <script type="text/javascript"> function moveObjectBy(objectID,deltaX,deltaY) {      var object = document.getElementById(objectID);      if (object.offsetLeft != null) {         var plusLeft = object.offsetLeft;         var plusTop = object.offsetTop;         object.style.left = deltaX + plusLeft + 'px';         object.style.top = deltaY + plusTop + 'px';      } } </script> <style type="text/css" media="screen"> #madHatter {      position: absolute;      top: 40px;      left: 30px;} </style> </head> <body> <a      onmouseover="moveObjectBy('madHatter', 75, 100); return false;"      onmouseout="moveObjectBy('madHatter', -25, -55); return false;"      href="#">I want a fresh cup...</a> <div > <img src="/books/3/292/1/html/2/alice39.gif" height="163" width="200" alt="The Mad Hatter" /> </div> </body></html>

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object that's being moved on the Web page. The function then uses offsetLeft and offsetTop (see "Determining an Object's Position" in chapter 14) to find the current position of the object and adds the deltaX and deltaY values to move the object to its new position.

2.

#madHatter {...}


Set up the IDs for your object(s) with values for position and top and left coordinates.

3.

onmouseover="moveObjectBy('madHatter', 75, 100);"


Add an event handler to an element to trigger the function you created in Step 1, and to pass it the ID for the object you want to address and the number of pixels you want to move it from its current location. Positive numbers move the object down and to the right; negative move it up and to the left.

4.

<div >...</div>


Set up your object(s).




CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net