René: Problem mit einem Positionierten Bild und "Input Box"

Beitrag lesen

Hallo,

Ich habe schon seit tagen ein kaum zu lösendes Problem.

der erste Schritt sollte mal die Beseitigung der Fehler im HTML sein. Dann hat sich das Problem vielleicht schon erledigt. Also: Dokument validieren, korrigieren, erneut testen.

Dort habe ich mit "img src" ein Bild eingebunden das als Hintergrund dienen soll.

Warum *ist* es dann kein Hintergrund?

Weil ich auf einem Hintergrund mit area keine Punkte ansprechen kann(Connect1/Cennect2)
und es bei hoher Auflösung dann nochmal anfängt, also das Bild.
Nun zum Problem.

Zu welchem der Probleme?

Was jetzt beschrieben wird.

<html>

  1. DOCTYPE fehlt.
       Da darf schonmal jeder Browser raten, nach welcher HTML-Version du den
       Code gern interpretiert hättest.

Ich lerne grade erst HTML, sry, dass hätte ich erwähnen sollen ^.-
Das heist, ich baue auf mein schul-html auf.
Daher weis ich leider nicht was du mit DOCTYPE meinst.

<style type="text/css" media="screen">
<!--

  1. HTML-Kommentare haben im style-Element nichts verloren. Weg damit.

ok ist geändert ^^

<body bgcolor="black">
<form action="haupt.html" onSubmit="return check();">

  1. Du benutzt doch CSS schon ansatzweise, warum nicht auch für die Hinter-
       grundfarbe von body? Weg mit den missbilligten HTML-Attributen.

ok ist weg!

  1. Du fängst ein Formular an, das jedoch nirgends geschlossen wird. Das ist
       vermutlich das Hauptproblem. Der Eventhandler heißt im übrigen nicht
       onSubmit, sondern onsubmit.

<img src="anmeldung.jpg" usemap='#Map' border='0'></a>

  1. Warum schließt du hier ein a-Element, das nie geöffnet wurde? Außerdem
       fehlt dem Bild das vorgeschriebene alt-Attribut.

Wie gesagt, bin Anfänger. Wusste nicht das alt vorgeschrieben ist.
Hab ich hinzugefügt.

<map name='Map' id='Map'>
      <area shape='rect' coords='540,657,629,696' onclick="check()"
      alt="Connect1" title="Connect1"' />

  1. Warum hier plötzlich XHTML-Syntax (Schließen des leeren Elements mit
       "/>"? Weg damit. Außerdem hat area kein alt-Attribut; meintest du
       stattdessen vielleicht das title-Attribut?

alt-Attribut rausgeworfen.

<div style="position:absolute; top:549px; left:598px; width:200px;
  padding:10px">
<p>
<input type="password" name="Passwort" id="Passwort">
</div>
</p>

  1. Verschachtelungsfehler: Erst muss das p-Element geschlossen werden, dann
       das div. Ich würde eins dieser beiden Elemente sogar komplett weglassen.

<p> ist weg, brauche ich hierbei eh nicht, danke für den Tipp.
Hier der wichtige Teil des Quelltext:
...
<body bgcolor="black">
<img src="http://home.arcor.de/rene.walbelder/INTERNET/anmeldung.jpg" border='0' usemap='#Map'></a>

... der nur leider unvollständig zitiert (also nicht identisch mit dem online-Beispiel) und damit für eine zielführende Aussage nicht brauchbar ist.

geändert damit man das als test nehmen kann.

  1. Kein technischer, sondern ein gedanklicher Fehler: Eine Passwortprüfung
       mit Javascript zu realisieren, wo jeder im Quelltext nachsehen kann, wie
       denn die Zugangsdaten heißen sollten - das ist so, als würdest du die
       Haustür abschließen und dann einen Zettel dranpinnen: "Schlüssel liegt
       unter der Fußmatte".

So long,
Martin

Das weis ich, da ich aber nur anstzweise html + javascript kann, wa mir nur diese Lösung möglich.

Danke dir für die Tipps.

Getestet.
Es funktioniert nun auch mit Opera, jedoch immer noch nicht im IE.
Vielleicht hast du ja noch einen Tipp für mich, hier der ganze und neue Quellcode.

________________________________________________________________________________
<html>
<head>
<title>Z_FIGHTERS_ UNION</title>

<script type="text/javascript">

function check()  

{
    var Benutzer$;
var Passwort$;
        Benutzer$ = document.getElementById("Benutzername").value;
Passwort$ = document.getElementById("Passwort").value;

  if (Passwort$ == "vigi" && Benutzer$ == "Admin")  
{  

alert("Richtig");
self.location.href = 'haupt.html?time=4+sek.';
   }
else
{
{alert("Falsch (Groß-Kleinschreibung beachten)");}
}
}
function login()

{
self.location.href = 'haupt2.html?time=4+sek.';
}
</script>
</head>

<body bgcolor="black">

<img src="anmeldung.jpg" border='0' usemap='#Map'>
      <map name='Map' id='Map'>
        <area shape='rect' coords='540,657,629,696' onclick="check()" title="Connect1"' />
        <area shape='rect' coords='650,660,740,700' onclick="login()" title="Connect2"' />
      </map>

<div style="position:absolute; top:537px; left:600px; width:200px;
 padding:10px">
<input name="Benutzername" id="Benutzername" type="text">
</div>

<div style="position:absolute; top:565px; left:600px; width:200px;
 padding:10px">
<input type="password" name="Passwort" id="Passwort">
</div>

</body>
</html>
______________________________________________________________________________

--
Diskutiere niemals mit Idioten,
erst ziehen sie dich auf ihr Niveau herunter
und schlagen dich dann durch Erfahrung!