Joe, Take a look at this: http://kevingraeme.com/imagegrid/index.html
It's a quickie rework of the CSS/layout as one way to handle the overlay. A technique I like to do with positioning is to create a relative positioned container object then absolutely position the items within it. You could have put my "imageArea" div into your table cell, but as I've shown the table isn't needed. Up to you. I didn't work with the javascript at all. But I would probably handle it as a toggle of the grid object's visibility property. Also, in your code you have a "none" that you're passing as a name for an image. I'd make a blank_grid.gif that's just an all transparent gif. Some other considerations are the size of the uploaded image. We have image upload apps and as digital camera resolutions have increased, so have the images people are trying to upload. In my CSS I've fixed the image display size, but that only helps a little. You might want to do a 2-step process. One that uploads the image and runs it through an image processor (something like cf_image), and then a page that they indicate what region on the image the problem is in. I'd probably even make the overlay grid a clickable imagemap that is the form submission. -Kevin On Tue, 1 Feb 2005 07:42:53 -0600, Joe Zanter <[EMAIL PROTECTED]> wrote: > Hi All, > I come before you with no muffins, but with granola bars instead. Please > don't throw them; I don't want injuries! (they may just be a bit on > the heavy side and with shards of chocolate embedded) > > I have an app that kind of mostly works. It's for uploading and > describing images of defects on parts. The feature I'm having trouble > with is a grid overlay. The user browses for an image, it gets > displayed and then they can select a grid to overlay on it to be able > to give coordinates when they describe it features on the image. > > Problem. > The grid get's overlayed, but it makes the cell twice as tall, like it > overlays, but it also adds a placeholder underneath. Here's a link to > the code below: > <http://www.zanter.net/test/imageapp/image_app_grid_help.cfm> > > Here's the code. Maybe there's a better way to do this? > ---------------------------------- > <!--Add a js FUNCTION to display the image when the browsed path is > displayed--> > <script type="text/javascript"> > <!-- > > //show the grid > function showGrid(img, imgName) { > var imgObj = document.images[imgName]; > imgObj.src = img; > } > > //display the browsed image > function showImage(img, imgName) { > var imgObj = document.images[imgName]; > imgObj.src = 'file:///' + img; > } > > // --> > </script> > > <h2>Upload images</h2> > <form name="imageupload" action="image_app.cfm" method="post" > enctype="multipart/form-data"> > > <table border="3" style="font-weight:bold" align="center" > cellpadding="3" cellspacing="4" bordercolor="#000080"> > > <tr align="center"> > <td valign="middle"><span style="color:maroon">figure > 1</span><br>click browse for filename: <br><input type="File" > name="figure1_file" size="50" onchange="showImage(this.value, > 'figure1_show')"> > <br><br>caption:<br><textarea name="figure1_text" cols="50" > rows="5"></textarea> > <br>#descrmessage#<br> > <h3>Select a grid color to overlay over the image.</h3> > <select name="grid1" title="grid color" size="1" > onchange="showGrid(this.value, 'figure1_grid')"> > <option value="none">none</option> > <option value="black_grid.gif">black</option> > <option value="white_grid.gif">white</option> > <option value="yellow_grid.gif">yellow</option> > <option value="green_grid.gif">bright green</option> > <option value="red_grid.gif">red</option> > <option value="blue_grid.gif">blue</option> > <option value="gray_grid.gif">gray</option> > </select> > </td> > <td valign="middle"> > <img src="preview_placeholder.jpg" name="figure1_show" width="500"> > <img src="preview_placeholder.jpg" name="figure1_grid" > width="500" style="position: relative; top: -375px; z-index:2"> > </td> > </tr> > > snip snip snip > </table> > </form> > ---------------------------------- > Joe > -- > Joe Zanter, Materials Lab, Woodward Aircraft Engine Systems > 5001 North 2nd Street, Rockford IL 61125 > ph 815-639-6312, fx 815-639-5104 > mailto:[EMAIL PROTECTED] > > Re-inventing the wheel is ok if it didn't come out round the first time. > > *** > The information in this e-mail is confidential and intended solely for the > individual or entity to whom it is addressed. If you have received this > e-mail in error, please notify the sender by return e-mail, delete this > e-mail, and refrain from any disclosure or action based on the information. > *** > > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Find out how CFTicket can increase your company's customer support efficiency by 100% http://www.houseoffusion.com/banners/view.cfm?bannerid=49 Message: http://www.houseoffusion.com/lists.cfm/link=i:5:145760 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/5 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:5 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.5 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
