Willkommen in der Webstatt
User-1 am 23.05.08 18:02

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?

netcup.de Warum gibt es hier Werbung?
User-2 am 23.05.08 18:18

<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>

User-1 am 23.05.08 18:23

mein problem sind nicht die mauskoordinaten, sondern, dass ich marginLeft nicht ändern kann.

(oder sollte dein script mehr tun als nur die mauskoordinaten anzeigen?)

User-2 am 23.05.08 18:28

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>

User-1 am 23.05.08 18:43

danke. funktioniert.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt