Hi all,
Is it possible to use HTML area objects from an image map as droppables for a drag/drop interface? I want to get a different response depending on which part of an image I drop a draggable div object on. The context is creating an incident report form where injuries can be dragged onto a body sketch. I've tried this using the code below. However, the droppable is always identified as "front_head", the first area object, no matter which part of the image is dropped on. Has anyone managed to get this working successfully, or found a way to achieve a similar effect?
Many thanks, Adam
<%= image_tag "body_sketch_front.gif", :usemap => "#front" -%>
<map id="front_map" name="front"> <area id="front_head" shape="circle" coords="100,30,20" href="#" alt="head" title="head"></area> <area id="front_torso" shape="rect" coords="70,70,120,150" href="#" title="torso"></area> </map>
<div id="injury_1" class="injury">punch</div> <div id="injury_2" class="injury">kick</div>
<div id="description"></div>
<script type="text/javascript"> $$(".injury").each(function(el){ new Draggable(el,{revert:true}); }) $$('#front_map area').each(function(el){ Droppables.add(el,{ accept:'injury', onHover:function(drag,drop){ // Some function to let us know what's going on $('description').innerHTML=drag.title + " on " + drop.title; }, onDrop:function(drag, drop){ // Some function to respond to the dropped injury alert("Dropped "+drag.id+"on"+el.id) } }) }) </script>