javascript on mouse move

**akanesakura** · 11-02-2008, 08:24 PM

hi guys,

i need some help adding some javascript on my html. below is my html code.

HTML Code:

<html>
<title>Javascript Help</title>
</head>

<body style="background-color: #FFCC00; ">

<div id="graybox" style="width: 800px; height: 350px; margin: 100px auto; background-color: #CCCCCC;">

	<div id="pointer" style="width: 10px; height: 50px; background-color:#0099FF; position: absolute; top: -1; left: 50%; "></div>

</div>


</body>
</html>

i want the pointer (blue rectangle) to follow my mouse position whenever i enter the graybox, the pointer should move only left and right.

thanks!

**Kenny** · 11-03-2008, 03:02 AM

This is from a drag script I modify for different purposes, there is a cross browser script too but, this should suffice for IE

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HEAD>

<TITLE>__</TITLE>

<STYLE type=text/CSS>



</STYLE>



</HEAD>

<body style="background-color: #FFCC00; ">



<div id="graybox" style="width: 800px; height: 350px; margin: 100px auto; background-color: #CCCCCC;">



    <div  id="pointer" style="width: 10px; height: 50px; background-color:#0099FF; position:relative "></div>



</div>

<SCRIPT type="text/javascript">

 var moveapproved=false;     var z,x,y,w;

function move(){ 

    if(moveapproved){z.style.pixelLeft=event.clientX-10;    return false;}

}

function moves(){

   moveapproved=true; z=document.getElementById('pointer');w=document.getElementById('graybox')

   x=event.clientX;y=event.clientY;document.onmousemove=move;

}

document.getElementById('graybox').onmouseover=moves;

document.getElementById('graybox').onmouseout=new Function("moveapproved=false");



</SCRIPT>



</BODY></HTML>

**Nile** · 11-03-2008, 03:31 AM

Kenny, that only works in IE... If you go to this page:
http://www.dynamicdrive.com/dynamici...drag/index.htm
And you scroll somewhat to the bottom, you'll see scrollers that only go left and right, and some that only go up and down. I'm sure you can find a way of putting these into your box, if you can't just tell me and I can do it for you.
I hope this helps,
Nile

**magicyte** · 11-03-2008, 03:33 AM

Not even in IE7, for me. It is really messed up. I tried it. I'm not taking it to use, I just came here to see what Nile was saying. Just testing...

-magicyte

**Nile** · 11-03-2008, 03:38 AM

Magicye, you'll need to use the pageY and pageX variables/what ever they are. I don't suggest doing this, there are tones of scripts out there already. And one even made by me. I'm not gonna give this one because I gave a one from dd above. I really don't suggest doing it unless your doing it for the fun of it. If you are:
pageY and pageX don't need events before them like clientY and clientX. They just need any variable. I suggest putting an `e` variable in the function, and making that e value event. Then before the client and page you'll put that e variable. If you know what I mean? Lol...

**magicyte** · 11-03-2008, 03:41 AM

Oh, I've done it before. I'm just testing this stuff out because you said something was wrong.

-magicyte

Thread: javascript on mouse move

Thread Tools

Search Thread

javascript on mouse move

Bookmarks

Bookmarks

Posting Permissions