title: jQuery imgAreaSelect - issue with image and area selection passed from form
body: <p>I've just started working the jquery umgareaselect and I think its just what I need, however I have an issue with the image I've uploaded. The upload script is working fine and the image is successfully saved to a folder called 'upload' on the server. I use a couple of asp variables to store the location of the file just uploaded. 
  If I reference the url directly of the image directly in the 'src' tag the initially selected area works fine, however if I use the variables from ASP (like the code below) then the image is loaded and displayed correctly but the initially selected area cannot be moved or selected. I hope the code below helps:</p>
  
  <pre><code>&lt;%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%&gt;
   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;  
  &lt;body&gt;
  &lt;%image_name = request.form("image_name")%&gt;
  &lt;%mainurl = request.form("mainurl")%&gt;
  
    &lt;form action="aspimage_DEMO3.asp" method="post" target="_blank" id="form"&gt;
    &lt;input type="hidden" name="x1" value="" /&gt;
    &lt;input type="hidden" name="y1" value="" /&gt;
    &lt;input type="hidden" name="x2" value="" /&gt;
    &lt;input type="hidden" name="y2" value="" /&gt;
    &lt;input type="submit" name="submit" value="Submit" /&gt;
   &lt;link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /&gt;
   &lt;script type="text/javascript" src="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/scripts/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"&gt;    
   &lt;/script&gt;    
  
   &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
  $('#ladybug_ant').imgAreaSelect({ x1: 10, y1: 10, x2: 40, y2: 40 });
   });
  
   $(document).ready(function () {
     $('#ladybug_ant').imgAreaSelect({
      onSelectEnd: function (img, selection) {
          $('input[name="x1"]').val(selection.x1);
          $('input[name="y1"]').val(selection.y1);
          $('input[name="x2"]').val(selection.x2);
          $('input[name="y2"]').val(selection.y2);     
  
        }
     });
   });
  
     &lt;/script&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  
    &lt;%   
   %&gt;
   &lt;img src=&lt;%response.write(mainurl)%&gt;&lt;%response.write(image_name)%&gt; id="ladybug_ant"      style="height:200px;width:300px;"&gt;&lt;br&gt;
  
  
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>So the 'mainurl' variable is just the '<a href="http://www.website.co.uk" rel="nofollow">http://www.website.co.uk</a>' and the 'image-name' variable is the '/uploads/imagename.jpg'.
  The img src tag works fine in the respect of displaying the image but the initially selected area cant be moved anywhere and when I press submit the co ordinates for cropping and not displayed. I know this is something straightforward to achieve I just cant seem to nail it, A little help would be greatly appreciated.</p>
  
  <p>Many Thanks
  Kev</p>