mit javascript verstecken funktioniert nicht
swffilms
- javascript
Hallo allerseits,
ich habe folgenden Quelltext:
--------------------------------------------------
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hide(i)
{
document.getElementById('1').style.display == "none";
document.getElementById('2').style.display == "none";
document.getElementById('3').style.display == "none";
document.getElementById('4').style.display == "none";
document.getElementById(i).style.display == "block";
}
</script>
</head>
<body ondblclick="self.close()">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<img src="./Test/03.png" alt="abc" id="1" style="display:none;">
<img src="./Test/02.png" alt="def" id="2" style="display:none;">
<img src="./Test/01.png" alt="ghi" id="3" style="display:none;">
<img src="./Test/00.png" alt="jkl" id="4" style="display:none;">
</td>
</tr>
<tr>
<td align="center">
<a href="javascript:hide('1')">1</a>
<a href="javascript:hide('2')">2</a>
<a href="javascript:hide('3')">3</a>
<a href="javascript:hide('4')">4</a>
</td>
</tr>
<tr>
<td align="center">Zum schließen, Bitte doppelt klicken</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------
und ich erhalte diese Ausgabe:
http://swffilms.sw.funpic.de/otherfiles/hide001.png
Das Ganze ist ein PopUp, welches die Bilder anzeigen soll, wenn man auf die Zahlen klickt.
Ich möchte das ganze jetzt lieber so (natürlich korrigiert) benutzen anstatt ein komplett neues Script zu schreiben.
Vielen Dank im Voraus,
swffilms
Hello,
verschiedene Anmerkungen zu deinem Quelltext:
document.getElementById('1').style.display == "none";
<img src="./Test/03.png" alt="abc" id="1" style="display:none;">
Zahlen sind keine gültigen Ids, bitte verwende an erster Stelle einen Buchstaben, siehe ID
document.getElementById('1').style.display == "none";
irgendwas sagt mir, dass du NICHT "==" gemeint hast: Vergleich vs. Zuweisung
<a href="javascript:hide('1')">1</a>
das ist eine äußerst unglückliche Art JavaScript in einen Link einzubinden. Das Protokoll "javascript" existiert nicht. Die Anweisung sollte sich im onclick-Eventhandler wiederfinden. Durch ein "return false;" hinter "hide('1');" sorgst du dafür, dass der href bei aktiviertem JavaScript keine Wirkung hat. Sofern möglich (in deinem Fall wohl eher sinnfrei) solltest du im href einen sinnvollen Verweis notieren.
------------------------------------
und ich erhalte diese Ausgabe:
http://swffilms.sw.funpic.de/otherfiles/hide001.png
MfG
Rouven
das ist eine äußerst unglückliche Art JavaScript in einen Link einzubinden. Das Protokoll "javascript" existiert nicht. Die Anweisung sollte sich im onclick-Eventhandler wiederfinden. Durch ein "return false;" hinter "hide('1');" sorgst du dafür, dass der href bei aktiviertem JavaScript keine Wirkung hat. Sofern möglich (in deinem Fall wohl eher sinnfrei) solltest du im href einen sinnvollen Verweis notieren.
da es sinnfrei ist, emfiehlt es sich ein "sinnfreies" element wie etwa <span> dafür zu verwenden und dies mit onclick zu versehen oder noch besser das element überhaupt erst mit javascript erzeugen, damit es für benutzer ohne javascript nicht da ist und stört
Hallo,
da es sinnfrei ist, emfiehlt es sich ein "sinnfreies" element wie etwa <span> dafür zu verwenden
Nein. Ein a-Element hat immer noch ein charakteristisches und äußerst nützliches Verhalten und Aussehen, das mit span nicht kopierbar ist.
Mathias
Nein. Ein a-Element hat immer noch ein charakteristisches und äußerst nützliches Verhalten und Aussehen, das mit span nicht kopierbar ist.
wenn du die pseudoklassen (link, visted und active meinst) meinst, da gebe ich dir recht - ansonsten lässt sich jedes verhalten problemlos reproduzieren wenn man einen guten browser verwendet, im übrigen wenn sowieso javascript verwendet, ist es auch kein problem mehr für den ie6
aber mal im ernst, was soll bei einem onclick ereignis :visited sein?
ein a-element dafur zu verwenden bewusst KEINEN link zu erzeugen sondern zb irgendwas ein und auszublenden tut man nicht
Hello,
ein a-element dafur zu verwenden bewusst KEINEN link zu erzeugen sondern zb irgendwas ein und auszublenden tut man nicht
prinzipiell vielleicht richtig - aber sieh dir mal den Screenshot des OP an, für das Problem könnte man auch eine JavaScript-freie Alternativlösung anbieten, dann macht der Link durchaus Sinn.
MfG
Rouven
prinzipiell vielleicht richtig - aber sieh dir mal den Screenshot des OP an, für das Problem könnte man auch eine JavaScript-freie Alternativlösung anbieten, dann macht der Link durchaus Sinn.
da geb ich dir recht - aber wie du "zum schließen doppelt klicken" ohne javascript machst zeigst du mir :D
Hallo,
ansonsten lässt sich jedes verhalten problemlos reproduzieren
Lässt es sich nicht. Ein Link ist fokussierbar und anspringbar über die gewöhnlichen Shortcuts. Das alles mit JavaScript nachzubauen ist nur halb so zuverlässig.
</archiv/2008/3/t168236/#m1097856>
wenn man einen guten browser verwendet
Verwendet man aber nicht immer, es soll auch im IE funktionieren.
ein a-element dafur zu verwenden bewusst KEINEN link zu erzeugen sondern zb irgendwas ein und auszublenden tut man nicht
Aha, »tut man nicht«. Komm mir nicht mit Argumenten! ;)
Mathias
Aha, »tut man nicht«. Komm mir nicht mit Argumenten! ;)
man kann auch mit tabellen layouts erstellen weil sich gewisse tabellenspezifische verhaltensmuster nicht in jedem browser mit css reproduzieren lassen - aber man tut es nicht, es ist einfach nicht richtig
"tut man nicht" ist leider kein totschlagargument
"der kunde will es so" leider schon :(
Hallo,
aber man tut es nicht, es ist einfach nicht richtig
Man, bring doch mal was anderes als apodiktische Behauptungen und Dampfplauderei.
Dein Beispiel ist übrigens ganz dämlich und es ist gefährlich, so (nämlich argumentfrei) gegen Tabellenlayout zu argumentieren. Dass man trotzdem keine Tabellen nutzt, hat seine Gründe. Das Tabellenlayout bringt andere Nachteile mit sich (Präsentation ist mit dem Markup verschweißt statt ausgelagert, es ist nur eine Präsentation möglich, Quelltext-Reihenfolge ist fest, Spalten können nicht flexibel untereinander rutschen usw.) und CSS eigentümliche Vorteile und kann das Verhalten von Tabellen durchaus hinreichend nachbilden.
Jetzt erzähl mir mal, was das mit <a href="javascript:"> zu tun hat, anstatt ständig leere Dogmen zu wiederholen.
Mathias
Jetzt erzähl mir mal, was das mit <a href="javascript:"> zu tun hat, anstatt ständig leere Dogmen zu wiederholen.
Zitat aus der wikipedia:
http://de.wikipedia.org/wiki/Hyperlink
Als Hyperlink [ˈhaɪpɚlɪŋk], auch kurz Link (engl. für Verknüpfung, Verbindung, Verweis), bezeichnet man einen Verweis auf ein anderes Dokument innerhalb eines Hypertextes, der automatisch durch das „Hypertextsystem“ verfolgt werden kann.
Der Begriff wird meist auf das World Wide Web bezogen.
Das Konzept von Hyperlinks entspricht funktional dem Querverweis oder der Fußnote aus der konventionellen Literatur, bei der das Ziel des Verweises allerdings in der Regel manuell aufgesucht werden muss.
Man spricht von einem verlinktem Dokument, wenn es mindestens einen Hyperlink enthält, der auf ein Drittes gerichtet ist.
wenn ich also <a href="javascript:" />oder <a href="#" onclick="" /> verwende, nutze ich das element nicht entsprechend seinr ursprünglichen bedeutung bez seinem entsprechenden zweck - ich nutze ihn um das von dir genannte spezielle verhalten eines links (automatisch gesetzter tabindex, focus, hover, active) zu nutzen obwohl es da rein um eine funktionalität/visuelle eigenschaft geht, die vom element erzeugt wird = präsentation
wenn ich eine überschrift ohne umbruch dahinter haben will, verwende ich ja auch nicht <b>blah</b> weil die standardeigenschaften von <b /> besser geeignet dafür sind, was ich visuell haben will - man nimmt das dafür gedachte, semantisch richtige elmente und passt es visuell seinen bedürfnissen an
<a /> element kein anker ist und auch kein verweis auf eine andere seite, dann wird er nicht im sinne seines eigentlichen verwendungszwecks gebraucht und das ist eine geschichte, die man nicht tut
genausowenig nutzt man blockquote für einrückungen oder defintionslisten für bildergalerien und fieldsets und legends für die aufteilung von seiten obowhl in der tat fieldset und legend eigenschaften an den tag legen, die sich mit anderen elementen so nicht reproduzieren lassen
Hallo,
Zitat aus der wikipedia
Ich weiß, was ein Hyperlink ist. Dazu habe ich mich schon im verlinkten Posting ausgelassen.
wenn ich also <a href="javascript:" />oder <a href="#" onclick="" /> verwende, nutze ich das element nicht entsprechend seinr ursprünglichen bedeutung
Wenig verwunderlich, denn HTML antizipiert keine JavaScript-Anwendungen auf HTML-Basis, insofern wird man im HTML-Standard kein Element außer vielleicht <button type=button> finden, das für den Zweck »ursprünglich« gedacht ist.
ich nutze ihn um das von dir genannte spezielle verhalten eines links (automatisch gesetzter tabindex, focus, hover, active) zu nutzen obwohl es da rein um eine funktionalität/visuelle eigenschaft geht, die vom element erzeugt wird = präsentation
Verhalten und Präsentation, ja. Im Übrigen geht es darum, dass ein Link ein Link ist und als solcher behandelt wird und in verschiedenen Kontexten ausgegeben wird, ohne dass das mit CSS oder JavaScript nachbildbar wäre. Versuch mal einem span ein Verhalten zu geben, dass es in einem Screenreader aktivierbar ist. Ja, man kann auch JavaScript-Anwendungen für solche zugänglich machen.
wenn ich eine überschrift ohne umbruch dahinter haben will, verwende ich ja auch nicht <b>blah</b> weil die standardeigenschaften von <b /> besser geeignet dafür sind
Der Vergleich ist genauso unpassend wie der mit Tabellenlayout vs. CSS.
Nochmal, auch hier: Ein hx-Element kann ich mit geringem Aufwand umformatieren und das ist auch die vorteilhafteste Möglichkeit, aus verschiedenen Gründen. Aber was hat das mit JavaScript und a zu tun? Warum es da nicht vorteilhaft ist, irgendein anderes Element zu nehmen und mit viel Aufwand und sehr ineffektiv das Verhalten von a nachzubilden, habe ich beschrieben. Da gehts du einfach nicht drauf ein.
<a /> element kein anker ist und auch kein verweis auf eine andere seite, dann wird er nicht im sinne seines eigentlichen verwendungszwecks gebraucht
»Ursprünglicher Verwendungszweck«, my ass! Du vergleichst Äpfel und Birnen, wenn du triviale Vergleiche aus dem Feld HTML vs. CSS anführst. Es geht aber um JavaScript, den dritten Faktor neben Inhaltsstruktur und Präsentation. Wie ich JavaScript-Logik einbinde und welche (ggf. vorhandenen, bekannten, schon implementierten) UI-Pattern ich nutze, ergibt sich doch nicht aus der Trennung von Textauszeichung (HTML) und Präsentation (CSS). Denn es gibt keine semantische Auszeichnung von JavaScript-Schaltflächen, außer vielleicht button/input type=button, das ist dann aber eher eine Nicht-Auszeichnung - was natürlich nicht unbedingt schlecht ist.
Deshalb kann man die Frage überhaupt nicht aus der Richtung »semantische Auszeichnung« einholen, höchstens negativ bestimmen. Da könnte man natürlich sagen, eine Schaltfläche ist kein Hyperlink. Wenn man das so streng sieht: Stimmt. Andererseits sehe ich keine praktischen Nachteile davon, ein a dafür zu benutzen, denn dessen herkömmliches Verhalten ist mir nur nützlich. Und als UI-Control liegt dessen allgemeine Bedeutung meiner Absicht auch überhaupt nicht fern. (Siehe verlinktes Posting.) Das ist bei den von dir angeführten Vergleichen ganz anders, da wird einfach grob HTML fehlverwendet, sodass handfeste Verwirrungen entstehen.
und das ist eine geschichte, die man nicht tut
Heul.
genausowenig nutzt man blockquote für einrückungen
Noch so ein beknackter Vergleich. Ich will keine Präsentation mit HTML lösen, die ich mit CSS so einfach ersetzen könnte und dabei viele Vorteile bekommen würde. Ganz im Gegenteil. Verhalten und Aussehen von a für den Zweck einer reinen JavaScript-Schaltfläche kann ich nicht äquivalent mit CSS erzeugen und den Gewinn, den ich bei bedeutungsvoller Textauszeichnung plus CSS-Formatierung in anderen Fällen (die meisten deiner Beispiele) habe, kann ich in dem Fall gar nicht erreichen.
oder defintionslisten für bildergalerien
Warum nicht. Da streiten sich die Experten. Ich sehe da eine enorme Grauzone, vgl. auch HTML 5.
und fieldsets und legends für die aufteilung von seiten obowhl in der tat fieldset und legend eigenschaften an den tag legen, die sich mit anderen elementen so nicht reproduzieren lassen
Ja, aber keine essentiellen. Ich habe keinen funktionalen Gewinn, wenn ich fielset/legend missbrauche, sondern funktionale Nachteile, weil ich falsche Informationen einstreue. Das ist bei a mit javascript:-URI tendenziell auch der Fall, z.B. bietet mir der Browser aus, den Link in einem neuen Fenster zu öffnen, was bei javascript: natürlich Unsin ist. Das will ich auch gar nicht leugnen.
Aber wie gesagt. Das ist millionenfache Praxis und ich halte diese nicht generell für gefährlich, sondern für größtenteils vorteilhaft. Wenn man das kritisieren will, gerne, denn es gibt berechtigte Einwände und Unstimmigkeiten. Das bloß theoretische Argument, dass es verquerte Textauszeichnung sei, mag stimmen, ist aber zahnlos und geht am Kern vorbei. Natürlich ist das nicht mehr als ein Hack - die Theorie, also HTML 4, ist da einfach anachronistisch. Das könnte man eher auf Basis von HTML 5 diskutieren, wo die Macher der Textauszeichnungssprache eingesehen haben, dass HTML eben auch als Grundlage für Scripting-Anwendungen dient.
Mathias
Aber wie gesagt. Das ist millionenfache Praxis und ich halte diese nicht generell für gefährlich, sondern für größtenteils vorteilhaft.
ums abzukürzen, ich halte es auch nicht für gefährlich aber es ist nicht richtig - ja, man darf ein <a /> element, welches man mit javascript (der von dir angesprochene dritte kontext) erzeugt dafür verwenden, auszusehen wie ein link
wenn ich aber ohne javascript daherkomme, will ich nicht von etwas verwirrt werden, dass aussieht wie ein link, sich verhält wie ein link aber nix tut sondern als ziel nur javascript: oder # angegeben hat - das ist defintiv falsch und überhaupt nicht barrierefrei - da kann ich 100% einen javascriptfähigen "screenreader" haben - aber sobald ich mit meiner braillezeile oder mit lynx daherkomme und da steht "klicken Sie hier um die AGB zu lesen" und dann passiert nix, weil irgend ein hornhochse <a href="#" onclick="mach_die_agb_auf();" title="klicken Sie hier um die AGB zu lesen">AGB</a> im html stehen hat, bekomm ich die kriese
wenn das ding schon aus visuellen gründen oder warum auch immer ein <a /> element sein soll, dann darf das ding auch gefällist nicht im html sein sondern soll erst durch javascript erzeugt werden, damit es überhaupt nicht da ist, wenn ich kein javascript habe und garnicht die frage aufwerfen kann "warum ist da ein link der kein link ist?"
Hallo,
wenn ich aber ohne javascript daherkomme, will ich nicht von etwas verwirrt werden, dass aussieht wie ein link, sich verhält wie ein link aber nix tut sondern als ziel nur javascript: oder # angegeben hat
Full ACK, das wollte ich auch nie gutheißen. Eine Seite sollte ohne JavaScript zugänglich sein, das ist klar. Aber wenn JavaScript aktiviert ist, kann man m.M.n. ruhig <a href="javascript:"> dynamisch einbauen.
dann darf das ding auch gefällist nicht im html sein sondern soll erst durch javascript erzeugt werden
Ja, selbstverständlich.
Mathias
Full ACK, das wollte ich auch nie gutheißen. Eine Seite sollte ohne JavaScript zugänglich sein, das ist klar. Aber wenn JavaScript aktiviert ist, kann man m.M.n. ruhig <a href="javascript:"> dynamisch einbauen.
Ja, selbstverständlich.
dann haben wir wohl aneinander vorbeigredet und meinen das selbe ;) - jetzt kann ich beruhigt schlafen gehen