Client side image map problem

getting an image position cross-browser with click and drag

[scratch]

I am creating an image map that has some special requirements.

A. Client Side
B. Click and Drag to get X, Y, W, and H
C. No Layers or Style Sheets due to other elements

This seems like a hard way, but i have a very particular application where users need to mark an area...
It is 95% done, but needs some fine tuning.

The first problem i ran into is getting the XY coordinates of an image on the page which works fine, but in explorer I get the position within a table if in a table which i am. I hard wired corrective code, but that seems to be off by 0-5 pixels depending on browser, mac or pc ie 5. I am not sure if this is a platform thing or shifting of the table. How do you get the location of a parent element, and work up the tree to the document bounds. Can it be done dynamically.

The second issue is that when i click and drag, the image moves as if i am copying it. I am using onmouseup and onmousedown and they are giving me correct values...but the image moving is disconcerting to me and i imagine my users. I don't care if users steal my images, but do not want any drags of this image.

//Here is the meat of my code that i am now using....
//This gets an images X,Y on the page
function getImgCoord(imgId) { // imgId being an image name
var Coord = new Array(2);
Coord[0] = (document.layers) ? (document[imgId].x) : (document[imgId].offsetLeft);
Coord[1] = (document.layers) ? (document[imgId].y) : (document[imgId].offsetTop);
return Coord;
}

//This gets the mouse X, Y
function getMouseCoord() {
var Coord = new Array(2);
Coord[0] = (document.all) ? (window.event.x+document.body.scrollLeft) : (e.pageX);
Coord[1] = (document.all) ? (window.event.y+document.body.scrollTop) : (e.pageY);
return Coord;
}

//you invoke them with
var XY = getMouseCoord();
var X = XY[0];

[scratch]

I successfully stopped dragging of my image by adding the following tag...
onDragStart="return false;"

into the image tag, which seems to block it so you can't drag the image.

This takes care of 90% of the problem, but this is proprietary to explorer. Is there something similar that can be done in Netscape and the other compliant browsers.

I also added the following tag
GALLERYIMG="no"
That gets rid of that annoying menu that is in newer Versions of Windows on top of the image.

[tedster]

So far we haven't been much help to you, scratch.

You're working with a sophisticated interface problem and I'll bet few developers here have wrestled with it (I know I haven't).

But this is the weekend, and traffic to WebmasterWorld is much lower than a weekday. If you don't have it sorted by Monday, then there's still hope when full traffic returns.

[scratch]

It helps just to post, it clears my thinking, besides it might help someone later following my footsteps.

[scratch]

This gets an images position...I think it works, rest is just implementation.

function getImgCoord(imgId) {
var cElement = document[imgId];
var Coord = new Array(2); // will hold result
var useClient = (cElement.offsetTop == 0)? ((cElement.offsetParent.tagName == "TR")? false : true) : false; // sets which protocol to use
if (useClient) {
var x = cElement.clientLeft;
var y = cElement.clientTop;
} else {
var x = cElement.offsetLeft;
var y = cElement.offsetTop;
}
var pElement = document[imgId].offsetParent;
while (pElement!= document.body) {
if (useClient) {
x += pElement.clientLeft;
y += pElement.clientTop;
} else {
x += pElement.offsetLeft;
y += pElement.offsetTop;
}
pElement = pElement.offsetParent;
}
Coord[0] = x;
Coord[1] = y;
return Coord;
}