nicht angemeldet
Mausposition absolut und im Bild
Hallo,
mein Problem ist, dass ich die Position des Mauszeigers sowohl absolut als auch im Bezug auf das Bild benötige. Also ich will praktisch den angeklickten Pixel wissen. Gibt es eine Möglichkeit, diese Koordinaten zu bekommen? Da das Bild nicht absolut positioniert ist kann man aus den Koordinaten der Maus auf dem Fenster nicht die Koordinaten auf dem Bild errechnen.
Eine Idee wäre ja eine Map zu machen, die jeden Pixel einzeln abfängt. Aber das wäre unglaublich schlecht-.- Es muss doch in Javascript einfacher anzustellen sein?
<script type="text/javascript">
function checker(e) {
if (!e)
e = window.event;
//absolute Koordianten
var absx = e.clientX, absy = e.clientY;
//Koordinaten auf dem Bild
//tja
}
</script>
<img src="blubb.png" onclick="checker">
Das ganz muss in Firefox und Netscape funktionieren. In der SelfHTML habe ich offsetX gefunden, was aber von Firefox nicht unterstützt wird ?!?
Ich hoffe auf eine Lösung.
mfg Virenerus
-
Hi,
Da das Bild nicht absolut positioniert ist kann man aus den Koordinaten der Maus auf dem Fenster nicht die Koordinaten auf dem Bild errechnen.
Doch - wenn man erst mal ermittelt, wo sich das Bild befindet.
http://javascript.jstruebig.de/javascript/36/MfG ChrisB
-
So, das funktioniert erstmal. Danke, danke danke.
Aber wie kann ich jetzt richtig ausrufen, so dass es nur beim Kilcken auf das Bild ausgelöst wird?
EIne Möglichkeit wäre natürlich mit den Koordinaten zu überprüfen, ob der Kilck im Bild war. Aber das geht doch bestimmt besser?
Hier der Versuchsquelltext:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test
</title>
<script type="text/javascript">
function Coords (e) {
if(!e)
e=window.event;
alert("Stelle im Bild: " + (e.clientX-getRect("blubber").left)+"/"+(e.clientY-getRect("blubber").top));
}
function getRect(id, win)
{
if(!document.getElementById) return null;
if(!win) win = window;var o = typeof id == 'string' ? win.document.getElementById(id) : id;
if(!o) return null;var rect = { top: 0, left: 0, width: 0, height: 0 };
rect.height = o.offsetHeight;
rect.width = o.offsetWidth;
while (o)
{
rect.top += parseInt(o.offsetTop );
rect.left += parseInt(o.offsetLeft );
o = o.offsetParent;
}
return rect;
}
document.onmousedown=Coords;
</script>
</head>
<body>
<img id="blubber" src="p.gif" width="100px;" height="200px;">
</body>
</html>
-