Solve this imagemap problem?

Question

Hi,

i have the following situation (please see image below after reading the following):

1. .dragoverlay (white rectangle in image) is a (jQuery) draggable div. it's the same size as the browser viewport.
2. .items (small red square(s) in image) is an absolutely positioned div of size 0x0.
3. The lightblue items squares are absolutely positioned divs with an image inside and are located within .items.
4. The darblue polygons are imagemaps which belong to the items.

I currently have the following html:

<style type="text/css">
    div.items {
        position:absolute;
        z-index:98;
    }

    div.dragoverlay {
        position:absolute;
        z-index:97;
        background-image:url('../img/transparentpixel.gif');
    }

    div.item {

    }
</style>

<div class="dragoverlay" style="cursor:move;"></div>
<div class="items">

     <!-- this content is variable -->

       <!-- this is one item-->
       <div id="XX" style="position:absolute;left:XXpx;top:XXpx;"><img src="XX" usemap="#mapid" /></div>
       <map name="mapid" id="mapid"><area shape="poly" style="cursor:pointer;" coords="XX" href="#" onclick="javascript:alert(\'hello\')" /></map>
     <!-- this content is variable -->

</div>

When the white .dragoverlay is dragged, the red .items is moved accordingly. This setup is needed.

How can I use the lightblue areas in the items (just outside every blue imagemap) as a startingpoint for dragging? As if the user clicks the .dragoverlay area...

Answer 1

I ended up putting a 1x1 transparent gif with the width/height of an item in the dragoverlay. I put the imagemap on this image (so that it is inside the dragoverlay) and then the expected behavior turns up.