Jquery Image Mapping
<p>The idea is I am designing a monitoring system for for several geographic locations.  It is annoying that user problems, accounts are seperate from network problems etc etc. Engineers are dealing with just networks but have little insight to the locations.  So I want to make a visual understanding of this... I had trouble getting an easy way to manipulate a floor plan or campus map to validate with data.  <strong>Voila</strong>! </p>

<p>Can't say I was impressed with the help from stackoverflow... I restated my question several times but kept at it and eventually found my own way...Hope this helps someone, please comment if any improvements. Next thing will be to bring in the post of the form prior so if lets say we have a 7 floor building ranging rooms from 100 to 150; 200 to 250 etc. that array will autoform the boxs so I just need to manipulate size and dimension.  Customization would be nice. Updating the 'tag' afterwards. But I want to move on :) </p>

<pre><code>    function addFormField(post) {
            var x=0;
            while(x&lt;post){

            var id = document.getElementById("id").value;
        //  $("#divTxt").append("&lt;p id='row" + id + "'&gt;&lt;label for='txt" + id + "'&gt;Field " + id + "&amp;nbsp;&amp;nbsp;&lt;input type='text' size='20' name='txt[]' id='txt" + id + "'&gt;&amp;nbsp;&amp;nbsp&lt;a href='#' onClick='removeFormField(\"#row" + id
    + "\"); return false;'&gt;Remove&lt;/a&gt;&lt;p&gt;");
            $("#divTxt").append("&lt;p class='box' id='row" + id + "'&gt;" + id
    + "&lt;p&gt;");       
            $('#row' + id).highlightFade({
                speed:500
            });

              $("#map").droppable({
              drop: function() { 
                ///

        //        $("#final :span").each(

            $("#final").append("&lt;br/&gt;&lt;span style='padding-left:10px'&gt;&lt;input name='final"+id+"' id='final"+id +"' type='text' size='19'&gt;&lt;/span&gt;&lt;span style='padding-left:22px'&gt;"+    $("#x-coordinate").text()+"&lt;/span&gt;&lt;span style='padding-left:15px'&gt;"+    $("#y-coordinate").text()+"&lt;/span&gt;&lt;span style='padding-left:15px'&gt;"+ width
    +"&lt;/span&gt;&lt;span style='padding-left:35px'&gt;" + height+"&lt;/span&gt;");


                /////
                }
            });

             $("#row"+ id).resizable(

             );
             $("#row"+ id).draggable({ 

        drag:function(){
             width = $(this).width();
             height = $(this).height();


             },
             containment: '#map', scroll: false 

             });

            id ++;
            document.getElementById("id").value = id;
            x++;

}
}

function removeFormField(id) {
    $(id).remove();
}

&lt;/script&gt;

&lt;body id="body"&gt;
&lt;div id="contain" style="width: 802px; height:769px; border:2px solid #ccc; margin-left:100px"&gt; 
 &lt;img src="tip/ITHNY-campus.JPG" width="790px" height="760px" border="0" id="map"&gt;
&lt;/div&gt;


&lt;a href="#" onClick="addFormField(1); return false;"&gt;Add&lt;/a&gt;
&lt;form action="#" method="get" id="form1"&gt;
&lt;input type="hidden" id="id" value="1"&gt;
&lt;div id="divTxt"&gt;&lt;/div&gt;
&lt;p&gt;&lt;input type="submit" value="Submit" name="submit"&gt;
&lt;input type="reset" value="Reset" name="reset"&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;br/&gt;
&lt;table&gt;&lt;tr&gt;
&lt;td&gt;X:&lt;/td&gt;&lt;td&gt;&lt;pre id="x-coordinate" style="display:block"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Y:&lt;/td&gt;&lt;td&gt;&lt;pre id="y-coordinate"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;br/&gt;
&lt;div  id="final"&gt;
&lt;table border="1"&gt;
&lt;tr&gt;
&lt;th width="144"&gt;Name&lt;/th&gt;
&lt;th width="36"&gt;X&lt;/th&gt;
&lt;th width="36"&gt;Y&lt;/td&gt;
&lt;th width="36"&gt;W&lt;/th&gt;
&lt;th width="70"&gt;H&lt;/th&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;/div&gt;
</code></pre>
