Drag and Drop an image onto another image

[franp329]

I am hoping someone can help me. What I want to do is drop a image onto another image and determine what area I dropped the image into. In the example that follows I have an image (pin.gif) which. I drag and drop onto image TwoCircles.gif. The drag and drop correctly identifies that pin.gif is over the target in this case the DIV that contains TwoCircles.gif.
I don't seem to be able to get which AREA in TwoCircles.gif the image has been dropped in
I can determine the coordinates of where I drop pin.gif, but don't know how to determine which AREA contains those coordinates. If the Areas were rectangles it would be easy to determine.
When I ask for the srcElement where the event fired I get pin.gif. srcElement.parentElement gives me the div and srcElement.parentElement.parentElement gives me the other div. How do I get to the area?

I have tried playing with the z-index. When I change the z-index in TwoCircles.gif to 1 SrcElement does return the Area but the visually the pin.gif disappears as soon as pin.gif is over the target area. I get my area value but my pin.gif hides.

I added to the Area statements the onClick event and that works but the drag and drop framework does not use onClick.

The drag and drop framework captures the following events

document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = doMouseUp;
document.ondragstart = doDragTest
document.onselectstart = doDragTest;

When I tried using onmouseup I didn't get the AREA to fire the event.


<MAP NAME="map1">
<AREA ALT="Left" SHAPE="circle" COORDS="226,18,70" ID="Left" onClick="alert('hey hey Left');" VALUE="LEFT" ID="LEFT">
<AREA ALT="Right" SHAPE="circle" COORDS="73,11,73" ID="Right" onClick="alert('you clicked Right');" VALUE="RIGHT" ID="RIGHT">
</MAP>

<DIV STYLE="POSITION: RELATIVE; BORDER: 1pt black solid; width: 660; height: 92; text-align: center; margin-bottom: 10pt">

<DIV ID="aImg" STYLE="position:absolute; visibility:visible; z-index:1; top:10; left:10; width:15; height:15; dragEnabled dropTarget='dropHere1'>
<IMG SRC="../Graphics/pin.gif" WIDTH="15" HEIGHT="15" ALT="" BORDER="0"></DIV>

<DIV STYLE="position: absolute; top: 0; left:350; width: 310; height: 90; border: 1pt black solid; z-index:0; background: white" >
<IMG ID="dropHere1" SRC="../Graphics/TwoCircles.gif" WIDTH="300" HEIGHT="89" ALT="Map" BORDER="0" USEMAP="#map1" >
</DIV>

</DIV>

I have tried everything I know how to. I hope someone can help me give me a pointer as to where I can go get more info or help.

[franp329]

Thank you for the response. I have tried the mouseover event on the Area.
I set a global variable to record it.
The problem is that the mouseover event does not fire while dragging the image. I have a feeling that the z-index thing makes the area hidden. If i mess with the z-index I can get the mouseover event to fire but then the draggable image dissapears.
Any thoughts are appreciated?