dynamic image from form RSS

• • Reply
  

  chopps

  Member

  586 Points

  158 Posts

  dynamic image from form

  Jan 29, 2004 07:35 PM|LINK

  the idea is to have a single image and a "pallete" of other small gifs. A user could select(click) on a small image from the pallete and then click on the large image placing the little image any where they want. Then they could choose another small image from the pallete and click on the lare image again placing the new image where they want. So far 2 small images have been placed on the large image. The user then submits the form and I process the results into one finally image using GDI+ with .NET. The key for me is to capture what small image they selected and where they clicked on the image so I can process accordingly. here is my problem..i can get the GDI+ part down but the actually javascript is another story.

  if request.Form("Submit") = "Submit" then
  		'response.Write request.Form("strLOCCoords")
  		
  
  		tempinput=request("strLOCCoords")
  		allCoords=split(tempinput,",")
  
  
  		maxcounter=ubound(allCoords)
  
  
  		FOR counter=1 TO maxcounter
  		thisCoords = allCoords(counter)
  		response.Write thisCoords & "
  "
  		NEXT
  
  
  	end if
  %>
  
  
  
       
            
            <script language="javascript">
                 function displayCoordinates(strCoordinates) {
                      var lngX;
                      var lngY;
                      if (strCoordinates.length>0) {
                           lngX=strCoordinates.substring(0, strCoordinates.indexOf(','));
                           lngY=strCoordinates.substr(strCoordinates.indexOf(',')+1);
                           if (document.all.imgCoords.length > 0) {
                                var newImage = imgCoords[0].cloneNode(true);
                                imgCoordsHolder.insertBefore(newImage);
                           }
                           else {
                                var newImage = imgCoords.cloneNode(true);
                                imgCoordsHolder.insertBefore(newImage);
                           }
                           imgCoords[0].style.display='block';
                           imgCoords[0].style.posLeft=lngX - 15;
                           imgCoords[0].style.posTop=lngY - 15;
                           imgCoords[0].style.zIndex=999;
                           }
                 }
                 
  
                 function setCoords() {
                      var strCoordinates = window.event.x + ',' + window.event.y;
                      displayCoordinates(strCoordinates);
                      frmForm.strLOCCoords.value=frmForm.strLOCCoords.value + ',' + strCoordinates;
                 }
                 
  
            </script>
       
       
            <form name="frmForm" id="frmForm" method="post" action="jscript1.asp">
                 <input type="text" name="strLOCCoords" id="strLOCCoords"/>
                 <input type="submit" name="Submit" value="Submit">
            </form>
            <div id="imgHolder" style="position:relative">
                 
                 <div id="imgCoordsHolder">
                      <div id="imgCoords" style="position:absolute;display:none"></div>
                 </div>
            </div>

  Chopps