Items are stored with x,y coordinates. The .items div starts at [0,0] and is repositioned based on movement of .dragger (which is made draggable). Everytime the user stops dragging / releases, .dragger is repositioned to the center of the screen, and an AJAX request is made which places the next x/y coordinated items which are in the current viewport in the .items container.
That's the introduction.
Every item-type has a imagemap (default [0,0,12,12,15,15,20,25] style). I add an html image-map with those values to .items for every item that is loaded.
The problem is I want the space outside the imagemap to behave as if the user was hovering only the .dragger div. I've added CSS styles to:
- dragger (cursor:move)
- imagemaps (cursor:pointer)
When I hover my mouse just outside an imagemap (but still on the image, however it is transparent png so I 'think' i'm hovering the .dragger div) the cursor doesn't go from pointer to move-cursor, but from pointer to normal arrow. Only outside the image-boundaries it turns into a move-cursor. And when I try to drag (on the image, outside the imagemap), i copy/drag the item-image (browser integrated drag, not the jQuery drag used on .dragger).
I need the .dragger helper and reposition the .items div based on it's movement. Is the cursor/drag behavious possible?
<div class="wrapper">
<div class="dragger"></div>
<div class="items"><!-- dynamic content --></div>
</div>