Problem mit w3c und Javascript bei document.images.*.style.top
2 
molily
0
Problem mit w3c und Javascript bei document.images.*.style.top
Hoi,
ich bin an dieser Stelle recht verzweifelt, habe ich doch schon viele andere Programmierer gefragt und alle wussten nicht, woran es liegt oder wie man den Fehler aus dem Script bekommt. - Hoffentlich habe ich einfach nur die Falschen gefragt.
Der Sachverhalt ist so:
Ich möchte für eine Spiele-Fanseite eine Übersicht über die darin enthaltenen Monster machen. Die User können auf einer Map die Koordinaten der Monster angeben und für andere abspeichern lassen.
Das Angeben der Koordinaten habe ich über Javascript gelöst, man klickt auf die Map und ein Fadenkreuz erscheint an der jeweiligen Stelle. Wenn man den exakten Punkt hat, kann man abspeichern.
Das Problem:
Das Script funktioniert einwandfrei, solange ich es nicht auf die Seite eingebunden habe, sobald ich es einbinde, funktioniert alles außer das Setzen des Fadenkreuzes.
Es gibt absolut keinerlei Fehlermeldungen o.Ä.
Durch Rumprobieren kam ich dann zumindest zur Fehlerursache; diese Zeile:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Entferne ich diese Zeile, bzw. nur die URL am Ende, funktioniert alles wieder ganz normal - sonst nicht.
Der Validator gibt keine Fehler aus.
Das Javascript lautet folgendermaßen:
function setCross(cx,cy,null_x,null_y) {
document.images.crosshair.style.left = cx-10;
document.images.crosshair.style.top = cy-10;
document.images.crosshair.style.display = "";
document.getElementsByName("vcy")[0].value = cy-null_y;
document.getElementsByName("vcx")[0].value = cx-null_x;
}
function setCords(e) {
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
x -= document.images.imgMap.offsetParent.offsetLeft;
y -= document.images.imgMap.offsetParent.offsetTop;
//setCross(x,y);
}
function getCords(null_x, null_y) {
setCross(x,y,null_x,null_y);
}
document.onmousemove = setCords;
Dies bezieht sich hierauf:
...
<tr>
<td colspan='5'>
<div style='position:relative;'>
<img name='imgMap' style='position:relative; z-index:1;' src='images/maps/" . $rowmaps_selected['id'] . "" . $rowmaps_selected['pic'] . "' onClick='getCords(\"" . $rowmaps_selected['null_x'] . "\",\"" . $rowmaps_selected['null_y'] . "\")' alt=''>
<img name='crosshair' style='position:absolute; left:0; top:0; z-index:2; display:none' src='images/maps/crosshair.gif' onClick='getCords(\"" . $rowmaps_selected['null_x'] . "\",\"" . $rowmaps_selected['null_y'] . "\")' alt=''>
</div>
</td>
</tr>
<tr>
<td colspan='5'>
<form action='" . $_SERVER['PHP_SELF'] . "?sid=minimap' method='post'>
x: <input type='text' name='vcx' value='$cx'>
- y: <input type='text' name='vcy' value='$cy'>
- <input type='Submit' name='savemap' value='Koordinaten speichern'>
<input type='hidden' name='savemap' value='" . $rowmaps_selected['id'] . "'>
<input type='hidden' name='monsterdwID' value='" . $_POST['monsterdwID'] . "'>
</form>
</td>
</tr>
...
Zur Verständniss:
null_x und null_y kann man hier vernachlässig und ist nur wichtig für mich, wenn ich die Koordinaten in die Datenbank eintrage, da ich vorher noch etwas rumrechnen muss.
Um es nocheinmal hervorzuheben:
Es werden absolut keine Fehler ausgegeben, das gesamte restliche Script außer diesen beiden Zeilen werden korrekt ausgeführt:
document.images.crosshair.style.left = cx-10;
document.images.crosshair.style.top = cy-10;
Wäre super, wenn mir einer helfen könnte.
Mit freundlichen Grüßen
-
Hallo,
document.images.crosshair.style.left = cx-10;
document.images.crosshair.style.top = cy-10;Das ist genauso, als würdest du in CSS schreiben: left:56; oder top:67;. Dort würde es auch nicht funktionieren, weil die Einheit fehlt - 56 was? Es gibt viele Längeneinheiten in CSS, wenn du Pixel meinst, schreibe ausdrücklich px. Also besser (cx - 10) + "px", sodass der String "56px" herauskommt.
Mathias
-
Hi,
Ich möchte für eine Spiele-Fanseite eine Übersicht über die darin enthaltenen Monster machen.
alert(top.frames.length); //?
Das Problem:
Das Script funktioniert einwandfrei, solange ich es nicht auf die Seite eingebunden habe,Wo denn sonst?
sobald ich es einbinde, funktioniert alles außer das Setzen des Fadenkreuzes.
Durch Rumprobieren kam ich dann zumindest zur Fehlerursache;
Nein, das glaubst du nur ...
diese Zeile:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Entferne ich diese Zeile, bzw. nur die URL am Ende, funktioniert alles wieder ganz normal - sonst nicht.
Weil sich die Browser ohne eine vollstaendige Doctype-Angabe in den sog. Quirks Mode begeben - in dem sie mehr von deinen Fehlern zu tolerieren bereit sind.
function setCross(cx,cy,null_x,null_y) {
document.images.crosshair.style.left = cx-10;
document.images.crosshair.style.top = cy-10;Was erfordern Laengenangaben in CSS *immer*, sofern der Wert ungleich 0 ist?
(Wenn sie mit "Die Angabe einer Einheit natuerlich!" antworten, bekommen sie ein aufblasbares Plastikschwein - sonst leider nix.)
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."