Problem mit Button-Link (+ Suche nach guten JavaTutorial)

DSD-Steve · #1 (**permalink**) 20.08.2006, 14:47

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.

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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 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...

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 · #9 (**permalink**) 22.08.2006, 09:05

Ja, denn sonst kann man es nicht abschicken.

Siegfried · #10 (**permalink**) 22.08.2006, 10:52

Hi,

Nein

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
clearen im 21 Jhr.	Muamicus	CSS	23	14.12.2010 19:50
aus Link einen Button machen mit CSS?	papgia01	CSS	2	23.10.2010 23:39
img link hover - Problem IE/FF	m.zimmer	CSS	7	03.02.2006 17:35
Problem mit Hintergrund-Grafik für CSS-Links!	Pumpkin	CSS	5	13.10.2005 15:13
Problem: Positioniertes DIV bei Link HOVER	Sefiroth	CSS	5	10.08.2005 16:16