zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Problem mit Button-Link (+ Suche nach guten JavaTutorial)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2006, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2006
Beiträge: 3
DSD-Steve befindet sich auf einem aufstrebenden Ast
Standard 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.

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.08.2006, 11:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Beitrag

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.08.2006, 12:40
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.08.2006, 13:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 21.08.2006, 14:38
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.08.2006, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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

Geändert von RoToRa (21.08.2006 um 15:48 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 21.08.2006, 16:29
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Siegfried (21.08.2006 um 16:33 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 21.08.2006, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2006
Beiträge: 3
DSD-Steve befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 22.08.2006, 09:05
_42 _42 ist offline
Minimalist
XHTMLforum-Mitglied
 
Registriert seit: 04.11.2005
Beiträge: 258
_42 befindet sich auf einem aufstrebenden Ast
Standard

Ja, denn sonst kann man es nicht abschicken.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.08.2006, 10:52
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Nein

Denn: Ein button ist vom typ button, ein input ist vom typ submit!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
aus Link einen Button machen mit CSS? papgia01 CSS 2 23.10.2010 23:39
Problem mit Hintergrund vom Sidebar! Pumpkin CSS 2 01.04.2006 04:14
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


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