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

document.onmousemove not working quite right help?

P: n/a
Hi,
I'm re phrasing and earlier question as the earlier question doesn't
make to much sense. I using document.onmousemove to move a <div line on
the screen. At the moment if I click and move the mouse over the image
it doesn't move the line but if I click off the image and move the mouse
the line moves like it's supposed to. Also if I click it off the image
and move the mouse over the image it then works. Something on clicking
the image is messing it up.

Can someone please tell me why when I click off the image it works and
when i click on the image and move it it doesn't. Here's my script so far.

Help please as this has really got me stuck at the moment. The code
works in NS6 and Mozilla.

Thanks

Anyone Know?

Gary
<HTML>
<HEAD>
</head>
<body bgcolor="FFFFFF">

<img name="main" border="1" src="iecadaptor.jpg">

<div id="top2" style="position:absolute; width:308px; height:1px;
z-index:1; left: 29px; top: 23px; overflow: visible; visibility: hidden;
background-color: black; layer-background-color: black; border: 1px none
#000000"></div>

<script language="javascript">
<!---
document.onmousemove = getXY;
document.onmousedown = mousedown;
document.onmouseup = mouseisup;
var netscape = (document.layers) ? 1:0;
var goodIE = (document.all) ? 1:0;
var netscape6 = (document.getElementById && !document.all) ? 1:0;
var height = 100;
var width = 100;
var left = 50;
var top = 60;
var visible = false;
var mouseX = 0;
var mouseY = 0;
var mousedn = false;
var hspc = 40;
var vspc = 9;
var name = 'secondtop';
var mousePageX;
var mousePageY;

document.getElementById("top2").style.visibility=" visible";

function mousedown(e)
{
//document.writeln("hello");
//document.getElementById("top2").style.visibility=" visible";
//mouseX = e.pageX;
//mouseY = e.pageY;
//mouseX = mouseX - 29;
//mouseY = mouseY - vspc;
//document.getElementById("top2").style.width=mouseX ;
mousedn = true;
//alert("hjiowewef");
//var thing;
}

// MOUSE MOVE DRAGGING LINE BUT LINE STOPS ON THE IMAGE WORKS OFF THE
IMAGE THOUGH
function getXY(e)
{
if(mousedn) {
width = width - 1;
mouseX = e.pageX;
mouseY = e.pageY;
mouseX = mouseX - 29;
mouseY = mouseY - vspc;
document.getElementById("top2").style.width=mouseX ;
//alert("Mouse Move");
window.status = "X: " + mouseX + " Y: " + mouseY;
}
}

function mouseisup(e)
{
mousedn = false;
//alert("Mouse UP");
}

// -->
</script>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies

P: n/a
What exactly do you want it to do?

Rob
www.avagio.co.uk
Jul 20 '05 #2

P: n/a
Rob Swindells wrote:
What exactly do you want it to do?

Rob
www.avagio.co.uk


Hi,
I want to be able to draw a rectangle over the image using the mouse and
get the co-ordinates sent to the server.

With that line if I click the image it seems like it's trying to drag
the image. How can i turn of the draggin image thing. I don't want a
drag image just want the onmousemove function to work.

Thanks
Gary
Jul 20 '05 #3

P: n/a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>clj</title>
<meta name="lastupdated" content="2004-03-04" />
<script>
var drawbox_initialised;
var mouse_eventX;
var mouse_eventY;

document.onmousedown = init_drawbox;
document.onmousemove = drawbox;
document.onmouseup = term_drawbox;

function init_drawbox( e )
{
if ( e )
{
mouse_eventX = e.pageX;
mouse_eventY = e.pageY;
}
else
{
mouse_eventX = event.x;
mouse_eventY = event.y;
}
document.getElementById( 'box' ).style.visibility = 'visible';
document.getElementById( 'box' ).style.left = mouse_eventX + 'px';
document.getElementById( 'box' ).style.top = mouse_eventY + 'px';
drawbox_initialised = true;
return false;
}

function drawbox( e )
{
if ( e )
{
mouse_eventX = e.pageX;
mouse_eventY = e.pageY;
}
else
{
mouse_eventX = event.x;
mouse_eventY = event.y;
}
if ( drawbox_initialised )
{
document.getElementById( 'box' ).style.width = ( mouse_eventX -
document.getElementById( 'box' ).offsetLeft ) + 'px';
document.getElementById( 'box' ).style.height = ( mouse_eventY -
document.getElementById( 'box' ).offsetTop ) + 'px';
document.getElementById( 'coords' ).innerHTML = 'l: ' +
document.getElementById( 'box' ).offsetLeft + 'px, t: ' +
document.getElementById( 'box' ).offsetTop + 'px, w: ' +
document.getElementById( 'box' ).offsetWidth + 'px, h: ' +
document.getElementById( 'box' ).offsetWidth + 'px';
}
return false;
}

function term_drawbox()
{
drawbox_initialised = false;
}
</script>
<style>
#box
{
border : 1px solid black;
height : 0px;
left : 0px;
position : absolute;
top : 0px;
visibility : hidden;
width : 0px;
}
</style>
</head>
<body>
<div id="box"></div>
<img name="image_target"
src="http://www.google.co.uk/intl/en_uk/images/logo.gif" />
<div id="coords"></div>
</body>
</html>
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.