Images and Mouse Events

**KraftyDood** · 12-07-2006, 04:40 PM

Hi.

I am trying to impement a draw-a-seletion-box-on-an-image-with-the-mouse thing, to allow the user to zoom into a specific rectangle of a picture.

So, I have written javascript to process mousedown, mousemove, and mouseup events. The selection box drawing works great over most the page, but if I try starting the mousdown on the image itself (which is what I would be wanting to do) the mousemove events are detected for a fraction of an inch (and my selection box starts drawing as I move), but then some background thing kicks in and a stop sign (black circle with a line through it) pops - after that I don't see the mousemove events or the next mouseup event. After I mouseup the mousemove events start coming through again.

Anyone know what is interrupting the mouse events and if they can be stopped. I am assuming something is trying to tell me that the image cannot be dragged. I thought it might have been the Image Toolbar stuff that pops up when you hover over an image (I am testing with IE6 right now) - but the interruption still occurs even if I disable the Image Toolbar.

Help!! and Thanks.

**shachi** · 12-07-2006, 06:53 PM

A link to the page would be really helpful for us to help you.

**KraftyDood** · 12-07-2006, 07:44 PM

http://24.68.128.108/select.html

Compare the difference between starting the selection box outside the image versus inside the image.

**shachi** · 12-08-2006, 02:44 PM

Try masking with a div "over" the image. So that the image is layer0 and the div layer1.

**KraftyDood** · 12-08-2006, 05:01 PM

Thanks for the suggestion. I had thought about putting a div over the image, but thought that might interfere with being able to right-click on the image to bring up the context menu (for printing and saving the image) - which I want to keep. I guess I can give it a try and see.

**shachi** · 12-09-2006, 07:38 AM

Try replacing your image tag:

Code:

<img src="select_files/big.jpg" onmousedown="return false;">

It should work.

PS: By the way how will you zoom into the image?? I am pretty keen to know that(I don't have a clue) and I would be really appreciated if you could tell me. I guess you do it by clipping the resized(with css or js) image.

**KraftyDood** · 12-12-2006, 06:30 AM

I tried adding the onmousedown="return false;" to the image tag. This worked for FireFox (1.0.7), but not under IE6. Under IE6 I found I also needed to add onmousemove="return false;" to the image tag.

Thanks for the suggestion - a very simple solution to the problem.

As to how I will actually be doing my zooming, cropping, and panning: In my 'live' page, the source of my image tag actually points to a java servlet I wrote, which takes as parameters the name of a MrSID file and the various zoom/position information. The java servlet then uses the MRSID Decode utility to scale and clip the piece of the image I want, resulting in a JPG file. Then the java servlet loads the JPG into a BufferedImage, and then I perform any rotation/flipping functions needed. In the end the servlet writes the resulting BufferedImage to the servlet's output stream, ie. ImageIO.write(imageBuffer, "jpg", response.getOutputStream()).

So whenever the user clicks on a zoom, pan, rotate, flip button, or selects a rectangle with the image, my page has a javascript routine that refreshes the image by assigning an updated source string (ie: "myimageservlet?image=big&zoom=3&rotate=90&...) to the image object.

MrSID iimages (see definition) are highly compressed images with multiple scale and quality levels designed for streaming over the web. The decoder utilility takes a fraction of a second to extract a scene from with the image. MrSID images are used for things like satellite imagery and mapping. My application is actually dealing with historical survey maps and diagrams for British Columbia - my sample big.jpg is an example of one of our MrSID file extracts, scaled to 1/32nd of its full image size.

I don't know if you wanted that much information, but there it is anyway. If you want to see an example of this working you could look at the demos at LizardTech.
LizardTech are the creators of the MrSID format. They have browser plugins, Java applets, and Perl solutions that allow viewing of MrSID images. My project is to develop our own non-plugin solution for viewing our MrSID images, as many of our (government) users are outfitted with locked-down workstations (security issues) and they are pretty much unable to install brower plugins.

Again, thanks for solving my problem.