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 15: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 12: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 13: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 14: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 15: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 16: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 17: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 19: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 10:05

Ja, denn sonst kann man es nicht abschicken.

Siegfried 22.08.2006 11:52

Hi,

Nein :)

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

RoToRa 22.08.2006 12:53

Zitat:

Zitat von DSD-Steve
1. Welche Variante ist besser: Die mit CSS oder mit den Formular? Welche sollte man bevorzugen.

Gar keine ;) Wie in dem Link, die ich gepostet habe, erklärt wird, sollten Links als solche zu erkennen sein. An sonsten lieber mit CSS, denn dann bleibt es logisch ein Link. Suchmaschinen z.B. "folgen" in der Regel keinen Formularen.

Zitat:

2. Warum muss der nutton vom Typ submit sein?
Damit das Formular submitet wird. Ein <button type="button"> submitet ein Formular nicht. Genauer gesagt "tut" es gar nichts, außer man benutzt JavaScript.

Zitat:

Bedeutet dies dann, dass also in jeden Formular ein Button vom Typ submit sein muss?
Nein. Es kann auch ein <input type="submit"> sein. Oder man kann auch es ganz weg lassen, aber dann wird man das Formular halt nicht submiten können - außer man benutzt wieder JavaScript. Wobei viele Browser ein Formular in bestimmen Fällen (z.B. wenn es nur einem Text-Feld besteht) auch ohne Submit-Button submitet, wenn man im Textfeld Return drückt.

Robin

RoToRa 22.08.2006 12:54

Zitat:

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

Ein Input kann auch vom type="button" sein, und ein Button vom type="submit".

Robin

Siegfried 22.08.2006 13:03

Echt? Ersteres wusste ich ja, aber ein button vom Typ submit? Das ist mir neu. Hmm, wieder was dazu gelernt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:42 Uhr.

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

© Dirk H. 2003 - 2023