nicht angemeldet
clientX (-Y) ist "undefined"
0 0 0 
Struppi
clientX (-Y) ist "undefined"
Moin.
Ich bin am Entwickeln einer Webseite für unseren Faschingsverein.
Ich habe ein Gruppenfoto als Image-Map eingebunden und möchte nun als Tooltip (beim Überfahren der Köpfe) den Namen und die Vereinsfunktion als Layer (div-Element) ausgeben. Nur leider funktioniert die Abfrage der Mausposition nicht. Der Layer erscheint wie im style-Bereich angegeben und alert() sagt, dass clientX undefiniert ist. Ich hoffe ihr könnt mir helfen.
Minimal-Quellcode:
<html>
<head>
...
<style type="text/css">
.layertext { position:absolute; top:1px; left:1px; visibility:hidden; }
</style>
<script type="text/css">
function InfoBox(evt, idname, status) {
alert(evt.clientX);
document.getElementById(idname).style.left = evt.clientX + "px";
document.getElementById(idname).top = evt.clientY + "px";
document.getElementById(idname).style.visibility = status;
}
</script>
</head>
<body>
<img src="pics/foto.jpg" style="width:600px; height:445px; border:none" alt="Elferrat" usemap="#Elferrat">
<map name="Elferrat">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Braun','visible')" onmouseout="LayerOff(InfoBox,'Braun','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Rehwagen','visible')" onmouseout="LayerOff(InfoBox,'Rehwagen','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Ullmann','visible')" onmouseout="LayerOff(InfoBox,'Ullmann','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Gulich','visible')" onmouseout="LayerOff(InfoBox,'Gulich','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Otto','visible')" onmouseout="LayerOff(InfoBox,'Otto','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Krasselt','visible')" onmouseout="LayerOff(InfoBox,'Krasselt','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Kamprad','visible')" onmouseout="LayerOff(InfoBox,'Kamprad','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Biber','visible')" onmouseout="LayerOff(InfoBox,'Biber','hidden')">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Seifert','visible')" onmouseout="LayerOff(InfoBox,'Seifert','hidden')">
</map>
<!-- *****Layer fuer Mitglieder *****-->
<div id="Braun" class="layertext">...</div>
<div id="Rehwagen" class="layertext">...</div>
<div id="Ullmann" class="layertext">...</div>
<div id="Gulich" class="layertext">...</div>
<div id="Otto" class="layertext">...</div>
<div id="Krasselt" class="layertext">...</div>
<div id="Kamprad" class="layertext">...</div>
<div id="Biber" class="layertext">...</div>
<div id="Seifert" class="layertext">...</div>
</body>
</html>
-
Moin Moin!
Entweder hast Du echten Bockmist gebaut und hierher gepastet oder Du bist extrem schlecht beim Abschreiben.
<script type="text/css">
Wie denn nun? CSS oder eine Scriptsprache?
function InfoBox(evt, idname, status) {
alert(evt.clientX);
document.getElementById(idname).style.left = evt.clientX + "px";
document.getElementById(idname).top = evt.clientY + "px";
document.getElementById(idname).style.visibility = status;
}
</script></head>
<body><img src="pics/foto.jpg" style="width:600px; height:445px; border:none" alt="Elferrat" usemap="#Elferrat">
<map name="Elferrat">
<area shape="rect" coords="..." nohref onclick="InfoBox(InfoBox,'Braun','visible')" onmouseout="LayerOff(InfoBox,'Braun','hidden')">Du übergibst der InfoBox-Funktion als erstes Argument sich selbst?
Übrigens schaffen es nicht alle Browser, Eventhandlern das Event-Objekt als ersten Parameter mitzuliefern, sondern mißbrauchen stattdessen eine globale Variable dafür. Siehe SelfHTML Javascript-Kapitel.
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". -
<script type="text/css">
Wie denn nun? CSS oder eine Scriptsprache?
function InfoBox(evt, idname, status) {
alert(evt.clientX);
document.getElementById(idname).style.left = evt.clientX + "px";
document.getElementById(idname).top = evt.clientY + "px";
document.getElementById(idname).style.visibility = status;
}
</script>Oh, sorry, ich bin im pasten schlecht... Das sollte natürlich type="text/javascript" heißen.
Du übergibst der InfoBox-Funktion als erstes Argument sich selbst?
Ähm... Ja.
Man muss ja irgendwie das Ereignis in eine Variabel bekommen und damit ich das hinkriege, fand ich diese Variante am einfachsten.
Aber das darf ich wahrscheinlich nicht?!-
Hi,
Du übergibst der InfoBox-Funktion als erstes Argument sich selbst?
Ähm... Ja.
Man muss ja irgendwie das Ereignis in eine Variabel bekommenWelches Ergebnis in welche Variable ...?
und damit ich das hinkriege, fand ich diese Variante am einfachsten.
Aber das darf ich wahrscheinlich nicht?!Es erscheint wenig sinnvoll an dieser Stelle.
MfG ChrisB
-
Hi,
Du übergibst der InfoBox-Funktion als erstes Argument sich selbst?
Ähm... Ja.
Man muss ja irgendwie das Ereignis in eine Variabel bekommenWelches Ergebnis in welche Variable ...?
clientX (-Y) enthält doch (soweit ich weiß) nur einen Wert, wenn ihm das Mausereignis übergeben wurde. Und genau dieses Ereignis bring ich die Funktion.
und damit ich das hinkriege, fand ich diese Variante am einfachsten.
Aber das darf ich wahrscheinlich nicht?!Es erscheint wenig sinnvoll an dieser Stelle.
Wenn das so klappen würde, könnte man so aber erreichen, das mit jeder Cursoränderung die Position neu berechnet wird, was ich wieder sinnvoll finde...
MfG
Frank-
Hi,
clientX (-Y) enthält doch (soweit ich weiß) nur einen Wert, wenn ihm das Mausereignis übergeben wurde. Und genau dieses Ereignis bring ich die Funktion.
Warum machst du es nicht so, wie es das Beispiel darstellt?
Wenn das event-Objekt nicht vom Browser (IE) an die Funktion uebergeben wird - dann wird es eben explizit "geholt".http://de.selfhtml.org/javascript/objekte/event.htm#client_x_y
MfG ChrisB
-
Warum machst du es nicht so, wie es das Beispiel darstellt?
Wenn das event-Objekt nicht vom Browser (IE) an die Funktion uebergeben wird - dann wird es eben explizit "geholt".http://de.selfhtml.org/javascript/objekte/event.htm#client_x_y
Aber ich will der Funktion ja noch Parameter mitgeben und ein Parameter muss ja das Event-Objekt sein... Wenn das jetzt mit document.onmousedown = InfoBox; geschieht, was schreib ich da in den Aufruf?
function InfoBox(evt, idname, status) { ... }
[Das evt muss ja dableiben, sonst kann ich mich nicht darauf beziehen.]
onclick="InfoBox( ??? , 'Braun', 'visible')"
[als Beispiel; ??? - was schreibe ich an diese Stelle?]
-
Hiho!
Ich bin grad etwas verwirrt. Aber trotzdem werf ich mal meine unqualifizierte Frage in den Raum:
Hast du es schonmal mit 'this' versucht?!
-
Hast du es schonmal mit 'this' versucht?!
Jetzt bin ich etwas verwirrt... :-)
Aber ich hab es jetzt hinbekommen. Ich musste mich zwar von meinem onclick verabschieden, das funktioniert jetzt nicht mehr, aber naja. Vllt hat ja jemand eine Idee, wie ich das mit onclick umsetzen kann...
<script type="text/javascript">
document.onmousemove = InfoBoxUpdate;
function InfoBoxUpdate(evt) {
MausPosX = (evt.clientX + 10) + "px";
MausPosY = (evt.clientY + 10) + "px";
}
function InfoBox(idname, status) {
document.getElementById(idname).style.left = MausPosX;
document.getElementById(idname).style.top = MausPosY;
document.getElementById(idname).style.visibility = status;
}
</script><map name="Elferrat">
<area ... onmousemove="InfoBox('Braun', 'visible')" onmouseout="InfoBox('Braun', 'hidden')" ...>
...
...
</map>Ich würde ja gerne nicht beim Überfahren der Maus, sondern beim Klick die InfoBox anzeigen wollen. Wenn ich jetzt aber das onmousemove durch onclick ersetze, "fliegt" ja die InfoBox nicht mit dem Cursor mit. Hat jemand eine Idee, wie das "Mitfliegen" trotz onclick umsetzen kann?
MfG
Frank
-
-
-
-
-
-
-
function InfoBox(evt, idname, status) {
onclick="InfoBox(InfoBox,'Braun','visible')"
du musst bei inline Eventhandlern, explizit das Event Objekt als Parameter übergeben, es wird nicht automatisch übergeben.
Also:
onclick="InfoBox(event, InfoBox,'Braun','visible')"und zwar für alle Browser und allen Eventfunktionen. Dein zweiter Parameter dagegen ist sinnlos, InfoBox ist die Funktion selber.
Struppi.