473,513 Members | 2,595 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

document.onmousemove not working quite right help?

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
3 5688
What exactly do you want it to do?

Rob
www.avagio.co.uk
Jul 20 '05 #2
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
<!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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1948
by: Dave White | last post by:
Hi All, I need to create a simple document library - basic features to include the users being able to select a category / sub-category and view a list of files / descriptions that match the...
2
2471
by: Stanimir Stamenkov | last post by:
I'm trying to find out if it is permissible to include a schema document with absent target namespace to a schema with specified target namespace, and if it is, what are the rules to resolve the...
0
1188
by: David Gersic | last post by:
I'm working with an HR system and trying to deal with an XML document that contains a bunch of personal data (unique to the person) and one or more sets of job data (a person can be hired more than...
4
1727
by: Eduard Witteveen | last post by:
Hello, I want to make a hooverbox, which is shown when the mousepointer is not moved for a amount of time. When the hooverbox is shown, i will do a server request to retrieve the information...
136
9203
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
5
2245
by: Iouri | last post by:
I have added the Overrides proc onMouseMove like Protected Overrides Sub onMouseMove(ByVal e As System.Windows.Forms.MouseEventArgs) ........... End Sub This proc supposed to fire when I...
7
2463
by: DazedAndConfused | last post by:
I have a 8.5 x 11 landscape document with about 1/4 inch of space on the left and right where there is no print. The document displays perfect in print preview, but when I print it, about 1/2 inch...
0
7260
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7160
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7384
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7537
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7099
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7525
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
4746
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
1594
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
456
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.