hallo!
ich versuche mich gerade an javascript. folgendes problem:
ich habe da eine box, die ich verschieben will, für den anfang soll der margin = der xposition des mauszeigers sein.
dazu habe ich was tollen aus dem internet kopiert, dass die mausposition ermittet:
document.onmousemove = mousePosition;
var mouseX = 0;
var mouseY = 0;
function mousePosition(e) {
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
mouseX = x;
mouseY = y;
move(mouseX);
}
und dann noch eine funktion zum verschieben der box:
function move(LOL) {
document.getElementById("works").style.marginLeft = parseInt(LOL);
}
der Box lässt sich mit document.getElementById("works").style.background zwar eine andere hintergrundfarbe zuweisen, aber die bewegung funktioniert nicht. warum? wie ändere ich das?
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function mouseCoordinates() {
var posx = 0;
var posy = 0;
function getCoordinates(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
}
this.handler = function (e) {
getCoordinates(e);
}
this.getCoordsX = function () {
return posx;
}
this.getCoordsY = function () {
return posy;
}
}
coords = new mouseCoordinates();
document.onmousemove = function(e) {
coords.handler(e);
document.getElementById('output').innerHTML = coords.getCoordsY()+':'+coords.getCoordsX();
}
//-->
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
mein problem sind nicht die mauskoordinaten, sondern, dass ich marginLeft nicht ändern kann.
(oder sollte dein script mehr tun als nur die mauskoordinaten anzeigen?)
Nein eigentlich nicht.....aber ich habs mal umgebaut ^
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function mouseCoordinates() {
var posx = 0;
var posy = 0;
function getCoordinates(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
}
this.handler = function (e) {
getCoordinates(e);
}
this.getCoordsX = function () {
return posx;
}
this.getCoordsY = function () {
return posy;
}
}
coords = new mouseCoordinates();
document.onmousemove = function(e) {
coords.handler(e);
document.getElementById('output').style.marginLeft = coords.getCoordsX()+'px';
}
//-->
</script>
</head>
<body>
<div id="output" style="margin-left:0px;border:1px solid red;width:100px;height:100px;"></div>
</body>
</html>
danke. funktioniert.
