comp.lang.javascript archive
Re: help with firefox/Netscape rectangle-over-image please
Date: Tue Aug 30 2005 - 16:14:23 CEST
Anyone ? I really need to get this issue sorted quickly.
Thanks
AW
AndrewW wrote:
> Hi
>
> I have an application that draws a selection rectangle over a map
> image. I can get it to work fine in IE and Opera, but not
> Firefox/Netscape.
>
> I've thrown the following small example together to illustrate the
> problem - the problem being that FF/NE initially draw my rectangle
> before the icon changes immediately to the black no-entry icon. Then,
> when I let go of the mouse, the rectangle continues drawing, but it
> doesn't stop as the mouseup has already fired of course.
>
> IE was doing the same, but I found the ondragstart/cancelDragDrop
> solution to that. I can't find what appears to be a similar solution
> for FF/NE.
>
> Any advice very gratefully received! Hair is fading fast :)
>
> <HTML>
> <HEAD>
> <META http-equiv=imagetoolbar content=no>
> <TITLE>
>
> </TITLE>
> <STYLE>
> #rubberBand {
> position: absolute;
> visibility: hidden;
> width: 0px; height: 0px;
> border: 2px dashed red;
> }
> </STYLE>
>
> </HEAD>
> <BODY>
> <img name="myImage" id="myImage" src="myimage.gif" height=400
> width=400>
>
>
> <DIV ID="rubberBand"></DIV>
>
> <SCRIPT>
>
> var IMG;
>
> function startRubber (evt) {
> if (document.all) {
> // IE
> var r = document.all.rubberBand;
> r.style.width = 0;
> r.style.height = 0;
> r.style.pixelLeft = event.x;
> r.style.pixelTop = event.y;
> r.style.visibility = 'visible';
> IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag
> the image
> }
> else if (document.getElementById) {
> // firefox
> var r = document.getElementById('rubberBand');
> r.style.width = 0;
> r.style.height = 0;
> r.style.left = evt.clientX + 'px';
> r.style.top = evt.clientY + 'px';
> r.style.visibility = 'visible';
> }
> IMG.onmousemove = moveRubber;
> }
> function moveRubber (evt) {
> if (document.all) { // IE
> var r = document.all.rubberBand;
> r.style.width = event.x - r.style.pixelLeft;
> r.style.height = event.y - r.style.pixelTop;
> }
> else if (document.getElementById) { // firefox
> var r = document.getElementById('rubberBand');
> r.style.width = evt.clientX - parseInt(r.style.left);
> r.style.height = evt.clientY - parseInt(r.style.top);
> }
> return false; // otherwise IE won't fire mouseup :/
> }
> function stopRubber (evt) {
> IMG.onmousemove = null;
> }
>
> function cancelDragDrop()
> {
> window.event.returnValue = false;
> }
>
> IMG = document.getElementById('myImage');
> IMG.onmousedown = startRubber;
> IMG.onmouseup = stopRubber;
>
> </SCRIPT>
> </BODY>
> </HTML>
Received on Tue Oct 18 03:14:35 2005