Automat Indexikow

Verweissymbole und Feldformatierungen automatisch zuordnen mit JavaScript und CSS

[ Es sollten sich beim Laden der Seite zwei Abfragen öffnen ]


  1. Automat Indexikow
    1. Verweissymbole und Feldformatierungen automatisch zuordnen mit JavaScript und CSS
    2. Das Vorgehen im Einzelnen
    3. JavaScript: Vom Allgemeinen zu den Ausnahmen
    4. Verschiedene Formatierungsmöglichkeiten bestimmen
    5. Beispiele für automatisch formatierte Verweise
    6. Einzelne Bereiche als Ganzes anders formatieren
    7. Formulare automatisch formatieren
    8. Ende / Zurück



 ^ Indexnummern auslesen


JavaScript zählt automatisch alle HTML-Elemente durch und vergibt ihnen Indexnummern ab 0. Dadurch lassen sich einzelne Elemente mit ihrer Indexnummer ansprechen - nur, welche ist das?

Das auf dieser Seite verwendete Script liest die Indexnummern beliebiger HTML-Elemente einer Seite dynamisch aus und ordnet ihnen diese zu, so daß auf alle angesprochenen Elemente automatisiert zugegriffen werden kann - auch wenn der Aufbau der Seite nachträglich verändert wird.



 ^ Das Vorgehen im Einzelnen

 ^ CSS-Grundformatierung


Diese dient der Vorgabe von Formaten, einerseits für allgemeine Seiten-Formatierungen wie Hintergrundfarbe, Schrift etc. der anzusprechenden HTML - Seiten, andererseits aber auch bereits der teilweisen Festlegung spezieller zentraler Formatierungen einzelner Seitenelemente, die nach dem Laden der Seite auf Grund der JavaScript - Anweisungen durchgeführt werden.

Diese CSS - Formatierungen sind auch bei abgeschaltetem JavaScript wirksamen.



 ^ Anschließende JavaScript-Formatierung


Die

CSS - Grundformatierung ( bei deaktiviertem JavaScript oder Nicht - Laden der Skripte ):

Verweisfarbe: Grün,
Besuchte Verweise: Rot;
Bei Berührung mit der Maus |blau mit hellblauem Hintergrund plus | rote Markierung rechts.
Bei Berührung mit der Tastatur rot mit gelbem Hintergrund



Und im Vergleich dazu die später wirksame


JavaScript - Grundformatierung ( wirksam auch ohne Laden der CSS - Datei ):

Verweisfarbe: Grün,
Bei Berührung mit der Maus bleibt es bei blau mit | roter Markierung rechts ( auf die eigene Seite | blau ) mit zugeordneten Symbolen.
Sollten sich diese nicht zeigen, liegt wahrscheinlich ein Fehler in der HTML - Formulierung vor, beispielsweise ein Zeilenumbruch im Verweis:
Lange Verweistexte vermeiden und / oder - insbesondere für den MSIE - auf der Internet-Seite selbst( ! ) im CSS white-space für Verweise auf nowrap setzen.
Besuchte Verweise: Rot.
Für die Berührung mit der Tastatur kann nur schwer oder gar nicht eine neue Verweis - oder Hintergrundfarbe gesetzt werden, da diese in JavaScript nicht überschrieben werden kann und JavaScript im gegensatz zu CSS keine Pseudoklassen kennt.
In diesem speziellen Fall geht es doch mit einem kleinen Umweg über onfocus.


Symbole und Hintergrund sind als Verweis mit aktiv.



 ^ CSS und JavaScript - Konflikte


Zur Beachtung:


  1. Soll sich eine automatisierte Formatierung auf eine andere beziehen, zum Beispiel auf die Hintergrundfarbe der Seite, dann läßt sich diese nur sehr schwer mit JavaScript sicher aus einer CSS-Formatierung auslesen.
    Entweder die Seitenfarbe ( Seiten-Hintergrundfarbe, Background-Color ) in CSS zentral für alle Seiten in der allgemeinen CSS-Datei angeben - dann haben alle Seiten die gleiche Farbe, und man kennt sie.
    Oder die Seitenfarbe in JavaScript als Variable zentral in einer allgemeinen JS-Datei ( oder dezentral für jede Seite als Onload-Funktion ) - dann kann man in Weiteren auf diese Variable zurückgreifen.
  2. Vorsicht bei allem, was den Textfluss unterbricht; wie zum Beispiel
    Umbrüche in Verweisen,
    Bilder im Verweistext, usw.
    Bei solchen Bildern im Text diese am besten am TextTop ausrichten.
  3. Die Symbole werden in der Schrifthöhe abgeschnitten.
  4. Der Pfad der Bilder in "url(..." bezieht sich immer auf die Position relativ zur HTML-Datei selbst.
  5. JavaScript sperrt, falls beispielsweise eine Farbangabe unbekannt ist. Das Auslagern der Formatierung in CSS ist deshalb zwar sicherer - hier werden Fehler einfach ignoriert - diese wird aber von JavaScript ggf. überlagert.
  6. Nach dem Zugriff auf eine JavaScript - Formatierung ist die entsprechende CSS - Formatierung ungültig, kann also nicht mehr als "default" wirksam sein. CSS - und JavaScript - Formatierungen sollten deshalb einander möglichst entsprechen - oder unabhängig von einander existieren.



 ^ Die Listenformatierung


Diese werden ebenfalls im CSS - Bereich vorgegeben und dann vom JavaScript - Bereich angepaßt.

Bei den unteren Unterpunkten


sondern um eine DL/DT
/DD "Definition List",
um auch hier eine besondere Formatierung zu ermöglichen. Nur der Einzug klappt nicht so recht...
  1. Ähnliches gilt für die nummerierte Aufzählung:
  2. Die Aufzählungspunkte wurden über CSS mit einem Hintergrundbild versehen.



 ^ JavaScript: Vom Allgemeinen zu den Ausnahmen


Die auch bei abgeschaltetem JavaScript wirksamen CSS - Formatierungen werden hier nun abgeändert, oder es werden andere CSS - Vorgaben dadurch angesprochen.

  1. Zuerst werden die "Dateitypen" festgelegt. dazu gehören alle Elemente, die mit einer automatischen Formatierung belegt werden sollen. Hier getrennt nach VerweisenLINKINDEX ) einerseits und FeldformatierungenFORMINDEX ) andererseits.
  2. Dann wird festgelegt, welche Formatierungen für welchen Dateityp gelten soll, insbesondere welche Symbole diesem Dateityp zugeordnet werden sollen.
    Grundsätzlich wird hier dabei das Bild nach der Datei-Endung ( Erweiterung ) oder einem anderen Merkmal des Dateitypen belegt, um allen Dateitypen nach demselben Schema ein Bild zuordnen zu können.
    Es besteht die Möglichkeit, ein Bild mehreren Dateitypen zuzuordnen.
    Leichter aber ist es, für jeden Dateitypen ein eigenes Bild in das entsprechende Verzeichnis zu stellen.
  3. Anschließend werden die Ausnahmen von der Regel beschrieben.
  4. Zuletzt wird die Formatierungen durchgeführt.
  5. Anschließend werden ggf. weitere übergeordnete Ausnahmen beschrieben und gemacht.
  6. Die Einzelheiten sind frei zu wählen. Es gibt beispielsweise für diese Seiten im JavaScript - Bereich zur Erkennung sechs Klassen: extern, intern, lokal, suche, ftp und mail sowie keine ( und noch ein paar mehr für den CSS - Bereich ), daneben Namensabfragen von Verweisen ( und im Formular - Bereich ), und Bereiche mit individuellen IDs.
    Es gibt bei den HTML - Verweisen eine Überschneidung mit dem NAME - Tag, der parallel dazu in HTML einen Seitenanker definiert. Man sollte zur automatischen Formatierung davon leicht zu unterscheidende Namen vergeben. Dennoch können danach Anker auf einer Seite als mehrfach vorkommend ausgewiesen werden.
    Das Vergeben von mehreren identischen IDs, welche die gleiche Formatierung auslösen sollen, führt dazu, daß nur der erste so gekennzeichnete Bereich ausgelesen wird.
    Das Vergeben von unterschiedlichen IDs, welche die gleiche Formatierung auslösen sollen, erzwingt für alle diese unterschiedlichen IDs Vorkehrungen zu treffen.
    Als Kompromiss werden für diese Seiten die zusammengehörenden IDs durchnumeriert ( gemeinsamer Name + laufende Nummer 0-X ) und danach gemeinsam erfaßt. Es ist dabei nicht notwendig, jede mögliche Nummer lückenlos zu vergeben, und es könne unterschiedlich Element mit diesen Nummern vergeben werden, wenn sie denn gleich formatiert werden sollen.



 ^ Die Formatierung auslösen


Die Durchführung der JavaScript - Anweisungen müssen nun ausgelöst werden:

Im allgemeinen wie hier automatisch beim Laden der Seite durch Body onload, evtl. mit einer Verzögerung durch ein timeout versehen, um das vollständige Laden der Seite zu gewährleisten. Auf dieser Seite wird zudem vom Benutzer abgefragt, welche der Formatierungen er durchführen lassen möchte.
Auf dieser Seite dagegen beispielsweise manuell durch einen Submit - Button.






 ^ Verschiedene Formatierungsmöglichkeiten bestimmen


 ^ Verweise formatieren


Im Folgenden werden die Formatierungsvorgaben für die HTML - Verweise ( "Links" ) auf den angesprochenen Seiten im JavaScript - Bereich festgelegt.



  1. Verweise auf HTML-Dateien innerhalb der so definierten eigenen Domain: http://www.meine-test-domain-xyz.de -
    - ob mit HTML-Datei: http://www.meine-test-domain-xyz.de/XYZ.htm
    - oder ohne: http://www.meine-test-domain-xyz.de/
  2. Verweise innerhalb der geöffneten HTML-Datei ( Anker )
  3. Verweise zu verschiedenen Dateien innerhalb der eigenen Domain: http://www.meine-test-domain-xyz.de/DATEI.XXX, differenziert nach Dateityp
  4. Verweise auf fremde HTML-Dateien, aus der eigenen Domain heraus: http://www.eine-fremde-domain.de
    - mit HTML-Datei: http://www.eine-fremde-domain./XYZ.htm
    - oder ohne: http://www.eine-fremde-domain.de/
  5. Verweise zu verschiedenen Dateien außerhalb der eigenen Domain: http://www.eine-fremde-domain.de/DATEI.ZZZ; hier pauschal mit einem Download-Symbol belegt.
  6. Zwischen bereits besuchten und noch nicht besuchten Verweisen soll differenziert werden.



 ^ Keine Vorgaben ohne Ausnahme


Diese Ausnahmen können manuell über die Zuordnung von Namen oder IDs markiert oder nach anderen Vorgaben automatisch identifiziert werden. Ihnen werden in CSS und JavaScript eigene Formatierungen zugewiesen, wobei der CSS-Bereich auch vom JavaScript-Bereich mit angesteuert wird, um die Formatierungen zu generieren.


Es kann dabei vorkommen, daß auf einen bis dahin nicht vorgesehenen Dateityp verwiesen wird. Für diesen befindet sich dann kein Symbol im Verzeichnis.

Es gibt verschiedenen Möglichkeiten, mit diesem Problem umzugehen:
- Man gibt im JavaScript eine Reihe von Dateitypen vor und prüft, ob dieser Typ zu diesem Array dazugehört.
Wenn nicht, wird ein Default-Symbol  -?- angezeigt.
- Man gibt im JavaScript eine Reihe von Dateitypen vor und ordnet jedem ein Symbol zu.
Alle anderen erhalten das Default-Symbol  -?- ( das ist nicht ganz dasselbe ) .
- Man gibt wie hier im JavaScript eine allgemeine Anweisung, welche den Dateitypen automatisch gleichnamige Symbole zuordnet und verzichtet auf eine Default - Funktion. Das Ergebnis ist ein leerer Platzhalter bei unbekannten Dateitypen ( dieses Bild tritt leider im MSIE auch bei erzwungenen Zeilenumbrüchen auf ):

"UNBEKANNT.XXX" - unbekannter Dateityp.

- Man könnte auch hier bestimmen, daß alle unbekannten Dateitypen das Default-Symbol erhalten. Nur kann JavaScript in dem Fall nicht erkennen, daß dieser Dateityp als Symbol nicht existiert, liest den fiktiven Dateinamen aus und fordert eine nicht existente Bilddatei an. Die Prüfung, ob diese Bilddatei auch im Verzeichnis vorhanden ist, führt zu sehr unterschiedlichen und damit kaum brauchbaren Ergebnissen.


 ^ Beispiele für automatisch formatierte Verweise


Die folgende Verweise wurden mit den hier wirksamen CSS - und JavaScript - Vorgaben Updated! automatisch formatiert:

  1. Innerhalb der eigenen Domain: http://www.erleuchtet.kilu.de
  2. Innerhalb der eigenen Domain: http://www.erleuchtet.kilu.de/
  3. Innerhalb der ( eigenen ) TEST-Domain: http://project-icarus.de/erleuchtet
  4. Innerhalb der ( eigenen ) TEST-Domain: http://project-icarus.de/erleuchtet/
  5. Innerhalb der ( eigenen ) TEST-Domain: http://project-icarus.de/erleuchtet/hilfe/autoform.htm
  6. Innerhalb der ( eigenen ) TEST-Domain: http://project-icarus.de/erleuchtet/hilfe/autoform.htm#Weiter1
  7. Innerhalb der ( eigenen ) TEST-Domain: http://project-icarus.de/erleuchtet/hilfe/autoform.htm#
    // Mit leerem Anker ( =Fehler )
  8. Innerhalb der eigenen Domain: TEST.doc
  9. Innerhalb der eigenen Domain: TEST.xls
  10. Innerhalb der eigenen Domain: TEST.txt
  11. Innerhalb der eigenen Domain: autoform.htm
  12. Innerhalb der eigenen Domain: autoform.htm#
    // Mit leerem Anker ( =Fehler )
  13. Aus der eigenen Domain heraus: http://www.eine-fremde-domain.de
  14. Spezialfall 1: Suche http://search.freefind.com
  15. Spezialfall 2: FTP ftp://eine-fremde-domain.de
  16. Spezialfall 3: Mailto mailto:lala@xxx


 ^ Ausnahmen bestimmen


Es können, wie gesagt, auf verschiedene Art und Weise Ausnahmen von der Regel bestimmt werden.

Diese Ausnahmen werden hier mit Hilfe eines besonderen Tag-Namens formatiert, da die Klassen bereits innerhalb der JavaScript - Datei festgelegt wurden. ( Es geht ja nur darum, zu zeigen, was möglich ist. Und was nicht. Beispielsweise fällt ein mit JavaScript umformatierter Verweis auf die klassenlose CSS - Formatierung zurück, wenn die in JavaScript eingestellte Klasse im CSS nicht zu finden ist. )

  1. Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens über CSS und JavaScript als rechtsbündig definiert
  2. Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens über CSS und JavaScript als Verzeichnis definiert
  3. Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens über CSS und JavaScript als Ohne Format definiert
  4. Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens über CSS und JavaScript als beidseitig definiert
  5. Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens über CSS und JavaScript als Schalter definiert


 ^ Ziele auslesen und Titel anpassen


Hier wurde zusätzlich in JavaScript das Zielfenster ausgelesen und und die Titel - Meldung entsprechend angepasst:

  1. default.txt   ( In HTML vorgegebener Titel=Test 123 - bspw. - wird mit JavaScript überschrieben )
  2. http://www.tralala_TEST.de/   (  target=_self )
  3. http://www.tralala_TEST.de/   (  target=_top )
  4. http://www.tralala_TEST.de/test5.htm   (  target=_blank )
  5. http://www.tralala_TEST.de/test5.htm   (  target=Tralala )
  6. http://www.tralala_TEST.de/test6.zip   (  target=Tralala )
  7. test4.htm   (  target=_self )
  8. test4.htm   (  target=_top )
  9. test4.htm   (  target=_blank )
  10. test4.htm   (  target=test )
  11. test4.htm#Sonstwo   (  target=_blank )
  12. http://www.TEST123.de/test5b.htm#A1   ( Target=Extern123 )
  13. http://www.meine-test-domain-xyz.de/test6.htm#A1   [ Meine Domain=interner Link ]   ( Target=_self )
  14. http://www.meine-test-domain-xyz.de/KeinAnker-KeinTarget.htm   [ Meine Domain=interner Link ]



 ^ Einzelne Bereiche als Ganzes anders formatieren


Man kann wie bisher beschrieben jedem Verweis ein eigenes Format zuweisen:
Klasse = "Ohne Format": dummy1.zip ( Nur mit CSS )
Name = "Ohne Format": dummy2.zip ( JavasScript + CSS )


Oder aber man weist einem ganzen ( DIV ) - Bereich über die ID ein bestimmtes Verweis-Format zu:


 ^ DIV ID Bereich Ohne Format

[ - Anfang des ID Bereich Ohne Format - ]

dummy-div1.zip

dummy-div2.zip


[ - Ende des ID Bereich Ohne Format - ]


Auf diese Weise werden mehrere Verweise pro DIV gleich formatiert - allerdings nur bei aktivem JavaScript.
Natürlich können auch hier wieder Bedingungen und Ausnahmen gesetzt werden - aber damit sei es erst einmal genug.




 ^ Formulare automatisch formatieren


Im Prinzip wird die automatische Formatierung von Formularen genau so durchgeführt wie die automatische Indexierung der Verweise einer Seite, da die Formular - Elemente ebenfalls zuerst pro Seite und nicht pro Formular indexiert werden. Doch gilt das auch zuverlässig in jedem Browser?





 ^ Formular 1

Formatiert mit JavaScript Feldformatierungen.

Hier ist der FeldinhaltValue ) im HTML vorgegeben und wird ggf. durch JavaScript aus dem Feldnamen überschrieben:



Ja Nein




 ^ Formular 2

Hier ist der FeldinhaltValue ) nicht im HTML vorgegeben und ggf. nur durch JavaScript aus dem Feldnamen generiert:



( Rechtsbündiger Text )




 ^ Ende



Als besonderes Feature ist auf dieser Seite noch Folgendes implementiert:






Hier zum Herunterladen


[ Etwas älter; die auf dieser Seite benutzte LINKINDEX ist neuer! ]:




Weitere Webdesign - Studien

Zurück zur Freeware - Seite

Zurück zur Eingangs - Seite

free hit counter