By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,963 Members | 1,994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,963 IT Pros & Developers. It's quick & easy.

help with firefox/Netscape rectangle-over-image please

P: n/a
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>

Aug 17 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

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>


Can anyone assist with this? It can't be impossible, but I can't work
out where it's going wrong.

Help very gratefully received, thanks in advance.

AW

Aug 22 '05 #2

P: n/a
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>


Aug 30 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.