Personal web server - CD-549Appendix F . Examples from Parts III and
CD-549Appendix F . Examples from Parts III and IV 3. Click the large image. The client properties perform as expected for both Windows and Mac, as do the screen properties. For Windows, the xand y properties correctly return the event coordinates relative to the IMG element s offsetParent, which is the DIV element that surrounds it. Note, however, that the browser sees the DIV as starting 10 pixels to the left of the image. In IE5.5/Windows, you can click within those ten transparent pixels to the left of the image to click the DIV element. This padding is inserted automatically and impacts the coordinates of the xand yproperties. A more reliable measure of the event inside the image is the offset properties. The same is true in the Macintosh version, as long as the page isn t scrolled, in which case the scroll, just as in Step 2, affects the values above. 4. Click the top HR element under the heading. It may take a couple of tries to actually hit the element (you ve made it when the HR element shows up in the srcElement box). This is to reinforce the way the client properties provide coordinates within the element itself (again, accept on the Mac when the page is scrolled). Clicking at the very left end of the rule, you eventually find the 0,0 coordinate. Finally, if you are a Windows user, here are two examples to try to see some of the unexpected behavior of coordinate properties. 1. With the page not scrolled, click anywhere along the right side of the page, away from any text so that the BODY element is srcElement. Because the BODY element theoretically fills the entire content region of the browser window, all coordinate pairs except for the screen coordinates should be the same. But offset properties are two pixels less than all the others. By and large, this difference won t matter in your scripts, but you should be aware of this potential discrepancy if precise positioning is important. For inexplicable reasons, the offset properties are measured in a space that is inset two pixels from the left and top of the window. This is not the case in the Macintosh version, where all value pairs are the same from the BODY perspective. 2. Click the text of the H1 or P elements (just above and below the long horizontal rule at the top of the page). In theory, the offset properties should be relative to the rectangles occupied by these elements (they re block elements, after all). But instead, they re measured in the same space as the client properties (plus the two pixels). This unexpected behavior doesn t have anything to do with the cursor being a text cursor, because if you click inside any of the text box elements, their offset properties are properly relative to their own rectangles. This problem does not afflict the Macintosh version. You can see further examples of key event coordinate properties in action in Chapter 31 s example of dragging elements around the page. (IE) event.clientX
In case you need quality webspace to host and run your web applications, try our personal web hosting services.