Willkommen in der Webstatt Zum Webstatt Blog und Stories
fish fish 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?
nuit nuit 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>

fish fish 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?)

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

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