| Using CSS, you can position an object on the screen (see "Setting an Element's Position" in Chapter 7); then you can use JavaScript to find the object's position (see "Detecting an Object's Position" in Chapter 14). But to make things really dynamic, you need to be able to move things around on the screen by changing the values for the object's position. In this example (Figure 16.7), the Mad Hatter moves from his initial position to a new position in the Web page when visitors pass their mouse over the link. Figure 16.7. The Mad Hatter is dashing for a fresh cup of tea. 
To change the position of an object: 1. | function moveObjectTo(objectID, x, y) {...}
Add the function moveObjectTo() to your JavaScript (Code 16.4).
Code 16.4. The moveObjectTo() function changes the position of the designated object in the browser window.| [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 & Ajax | Moving Objects from Point to Point</title> <script type="text/javascript"> function moveObjectTo(objectID, x, y) { var object = document.getElementById(objectID); object.style.left = x +'px'; object.style.top = y + 'px'; } </script> <style type="text/css" media="screen"> #madHatter { position: absolute; top: 40px; left: 30px;} </style> </head> <body> <div > <a onmouseover="moveObjectTo('madHatter', 200, 200); return false;" onmouseout="moveObjectTo('madHatter', 30, 40); return false;" href="#">I want a fresh cup... </a> </div> <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 on the Web page. It then uses the x and y values to reset the left and top positions of the object. Remember that to be valid CSS, you cannot simply assign the raw numeric values to the top and left styles, but must assign them length values. This is why we use +'px'.
| | | 2. | #madHatter {...}
Set up the CSS rules for your object(s) with initial values for position and top and left position coordinates.
| 3. | onmouseover="moveObjectTo ('madHatter', 200, 200);"
Add an event handler to an element to trigger the function you created in Step 1, and pass to it the ID for the object you want to address and the new coordinates for the object.
| 4. | <div >...</div>
Set up your object(s).
|
 Tips
Although I set both top and left positions to move the object, you can use just one of these to have the object move vertically or horizontally. You can use negative values to move the content up and to the left instead of down and to the right. If an element's position is defined as relative, its margins remain unaffected by the top and left properties. This means that setting the top and left margins may cause the content to move outside its naturally defined box for that object and overlap other content.
|
