XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Problem mit Button-Link (+ Suche nach guten JavaTutorial) (http://xhtmlforum.de/showthread.php?t=41437)

DSD-Steve 20.08.2006 14:47

Problem mit Button-Link (+ Suche nach guten JavaTutorial)
 
Hi, ich hab jetzt angefangen mich mit JavaScript zu beschäftigen. Ich selber hab aber noch Programmiererfahrung durch C, daher hab ich keine Probleme mit KOntrollstrukturen und so.:D

Ich hab auch schon erste Scripte hinbekommen, nur hab ich jetzt ein Problem: Ich versuche einen Buttons als Link zu verwenden. Mein Ansatz sieht so aus:
Code:

<div align="center">
                <button type="button" name="author" document.location.author.href="autor.html">
                        <img src="steve_b.jpg" alt="Autor">
                        <p>
                                Autor
                        </p>
                </button>
        </div>

Wie schon gesagt, ich bin noch anfänger. Bitte also nicht lachen, wegen dieser Frage...:?

MfG. DSD-Steve

RoToRa 21.08.2006 11:39

Zunächst: Achte drauf Java und JavaScript nicht zu verwechseln. Die haben mit einander nichts zu tun.

Zwei der wichtigensten Regeln von JavaScript sind:

1) Man muss wissen wann man JavaScript nicht einsetzt. Das ist u.a. immer der Fall, wenn man es für etwas einsetzten will, was auch ohne JavaScript gemacht werden kann. Außerdem sollte man immer eine Webseite so gestalten, das es auch ohne JavaScript funktioniert.

2) Gutes JavaScript sollte immer auf gutes HTML/CSS aufsetzen. D.h. unter anderem das HTML und CSS zu validieren.

In deinem Fall zunächst zum eigentlichen Fehler: Du kannst HTML und JavaScript nicht einfach mischen. JavaScript kann nur an drei Stellen verwendet werden.

a) In einer externen Datei, das mit einem Script-Element eingebunden wird:
Code:

<script type="text/javascript" src="meine-js-datei.js"></script>
b) Innerhalb eines Script-Elements:
Code:

<script type="text/javascript">
function klickeLink() {
  document.location.author.href="autor.html";
}
</script>

c) In Event-Handler von HTML-Elementen:
Code:

<button type="button" onclick="document.location.author.href='autor.html';">
  ...
</button>

Jetzt zum zweiten Punkt: Ein Button (als Inline-Element) darf keine Block-Elemente (in deinem Fall ein P-Elemente) enthalten:

Code:

<button type="button" onclick="document.location.author.href='autor.html';">
  <img src="steve_b.jpg" alt="Autor"> Autor
</button>

Jetzt zum ersten Punkt: Dazu gehört das "Links Links sein wollen": http://www.cs.tut.fi/~jkorpela/www/links.html

Wenn Du trotzdem ein Button haben willst gibt es zwei bessere Lösungen. Entweder du nimmst einen normalen Link und benutzt CSS um es wie ein Button zu stylen:

Code:

<style type="text/css">
  a {
      border: 2px outset silver;
      background-color: silver;
  }
</style>
<a href="autor.html">
  <img src="steve_b.jpg" alt="Autor"> Autor
</a>

Oder du benutzt einen Formular:
Code:

<form action="autor.html">
  <button type="submit">
      <img src="steve_b.jpg" alt="Autor"> Autor
  </button>
</form>

Robin

Siegfried 21.08.2006 12:40

Hi,

es gibt noch einen anderen Weg:
Code:

<a href="hierhin.html">
    <button type="button" onclick="self.location.href='hierhin.html'">
        Author
    </button>
</a>

Allerdings hat das einen wichtigen Nachteil: Hier landest Du bei einem ganz üblen Bug des IE. Der kann nämlich offensichtlich Anker nicht richtig. Wenn beim IE innerhalb eines Ankers ein Button auftaucht, dann zeigt der IE zwar das Ziel auch ohne die JavaScript Krücke in der Statuszeile an, aber er weigert sich, dorthin zu wechseln.
Weitere Nachteile: Auf KHTML basierende Browser wie Konqueror oder Safari rendern den Text zu hoch, wenn der Hintergrund des Buttons ein Bild ist. Und Opera kriegt bei dem Element Probleme mit transparenten Bereichen solcher Hintergrundbilder.

In Firefox klappt's natürlich perfekt. Und valide isses auch. Die zusätzliche JavaScript Krücke brauchst Du nur für den IE, dann sollte es allerdins nicht nur onclick sein, sondern auch z.B. onkeypress.

RoToRa 21.08.2006 13:37

Zitat:

Zitat von RoToRa
Jetzt zum zweiten Punkt: Ein Button (als Inline-Element) darf keine Block-Elemente (in deinem Fall ein P-Elemente) enthalten:

Zunächst muss ich mich selbst korrigieren: In einem Button dürfen wohl Block-Elemente vorkomment.

Zitat:

Zitat von Siegfreid
es gibt noch einen anderen Weg: [...] Und valide isses auch.

Tut mir leid Siegfried, aber hier macht der der IE ausnahmswiese korrekt: Ein Button darf nicht in einem A-Element vorkommen.

Robin

Siegfried 21.08.2006 14:38

Wer sagt das? Wo steht das?

Innerhalb eines Ankers (a-Element) darf jedes inline-Element vorkommen! Und button ist ein inline-Element. Und der w3c-Validator bestätigt meine Meinung dazu.

RoToRa 21.08.2006 15:45

EDIT: Vergiss was ich ich nachfolgend geschrieben habe. Du hast recht. Ich habe noch mal nachgelesen und ich habe das -(A|%formctrl;|FORM|FIELDSET) falsch gelesen...

Zitat:

Zitat von Siegfried
Wer sagt das? Wo steht das?

Im HTML-Standard bzw. DTD. Wo sonst ;) Zitat aus http://www.w3.org/TR/html401/interac...ml#edef-BUTTON :

Code:

<!ELEMENT BUTTON - -
    (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
    -- push button -->

Dabei bedeutet -(A|%formctrl;|FORM|FIELDSET) das ein BUTTON nicht innerhalb von einem A-Element (unter anderem) vorkommen darf.

Zitat:

Innerhalb eines Ankers (a-Element) darf jedes inline-Element vorkommen!
Jaaaaa, da habe ich auch zuerst geschaut, aber der BUTTON hat halt seine eigene Ausnahmeregel.

Zitat:

Und der w3c-Validator bestätigt meine Meinung dazu.
Hättest du ein Beispiel online das ich mir anschauen kann, denn ich muss dann wohl annehmen, das der Validator ein Bug hat.

Robin

Siegfried 21.08.2006 16:29

Zitat:

Zitat von RoToRa
EDIT: Vergiss was ich ich nachfolgend geschrieben habe. Du hast recht. Ich habe noch mal nachgelesen und ich habe das -(A|%formctrl;|FORM|FIELDSET) falsch gelesen...

Die Meisten verwechseln input type="submit" mit button type="button" :) Da bist Du nicht der Erste.

Übrigens: Andersherum, also ein Anker innerhalb eines Buttons, das ist tatsächlich nicht erlaubt.
Zitat:

Zitat von RoToRa
Hättest du ein Beispiel online das ich mir anschauen kann, denn ich muss dann wohl annehmen, das der Validator ein Bug hat.

Robin

Aber immer doch :) Meine eigenen Seiten verwenden das schon seit Langem. In der html-Version mit der Javascript Krücke, z.B. http://www.rorkvell.de/index.html.de
in der xhtml-Version (nicht für IE) ohne diese JavaScript Krücke:
http://www.rorkvell.de/index.xhtml.de

DSD-Steve 21.08.2006 18:51

Erstmal vielen Dank für eure schnelle Hilfe.

Ich habe die letzte Möglichkeit von RoTaRa gewählt. Lustiger weise, war aus irgendeinen grund diese aber die einzige(und die CSS Variante) die Funktioniert hat.:|

Das ich den Event-Handler vergessen hatte, ist mir nicht aufgefallen. Eigentlich weis ich wie man einen JavaScript einbindet...8)

Aber danke auch noch mal für den Hinweis, dass man dies ja auch ohne JavaScript lösen kann. :)

Ich hätte aber noch gern ein paar Fragen:
1. Welche Variante ist besser: Die mit CSS oder mit den Formular? Welche sollte man bevorzugen.

2. Warum muss der nutton vom Typ submit sein? Mir ist die Übersetzung schon klar. Bedeutet dies dann, dass also in jeden Formular ein Button vom Typ submit sein muss?

_42 22.08.2006 09:05

Ja, denn sonst kann man es nicht abschicken.

Siegfried 22.08.2006 10:52

Hi,

Nein :)

Denn: Ein button ist vom typ button, ein input ist vom typ submit!


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022