Lektion 5 - Specials (JavaScripts, CSS-Styling, ...)

PopUpFenster-Hyperlink

<a href="javascript:window.open('http://www.domain.de', 'Name', 'menubar=no, status=no, toolbar=no, resizable=yes, scrollbars=yes, width=500, height=300');void(0);">Linkbezeichnung</a>

Beispiel: Homepage von Charles
<a href="javascript:window.open('http://hp.mainfranken-chat.com/homepages/mainfranken-chat.de/hp/34/charles.html?t=Sg', 'Homepage von Charles', 'menubar=no, status=no, toolbar=no, resizable=yes, scrollbars=yes, width=500, height=300');void(0);">Homepage von Charles</a>

Erklärungen:
'http://www...' = Dateiname bzw. Zieladresse eintragen
'Name' = Namen für die Scriptaufforderung verwenden (beliebig möglich)
'menubar=no, status=no, toolbar=no, resizable=yes, scrollbars=yes, width=500, height=300' = JA/NEIN-Werte für: Menü-, Status-, Werkzeugleiste, Größenveränderungsmöglichkeit und Einblendung der Scrollbalken und abschließend Pixelausdehnung des Fensters mit den Werten für Breite und Höhe

Link-Button

<input type="button" value="Mainfranken-Chat Hilfeseite" onClick="popup=window.open('http://www.mfc-help.de/')">
Beispiel


value="Mainfranken-Chat Hilfeseite" legt die Buttonbezeichnung fest

Klick-Button mit anschließendem Text-Hinweis-Fenster

Beispiel

<input type="button" onClick="JavaScript: alert(' Dies ist ein Text-Hinweis-Fenster \n *gg* ');" value="Hier einmal klicken">

Tipp: Möchte man mehrere Alert-Fenster anzeigen, einfach eine weitere Zeichenkette "alert(' Text '); " einfügen - Trennung zwischen den einzelenen Ketten jeweils durch ein Semikolon.
Tipp #2: Der String "\n" definiert einen Zeilenumbruch im Text des Hinweisfensters.

Textlink mit anschl. Texthinweisfenster

<a onfocus="this.blur()" href="JavaScript: alert(' Hallo zusammen! ');">Linktext</a>
Beispiel
Linktext

alert(' TEXT '); legt fest, was danach im Hinweisfenster steht
"Linktext" legt fest, welchen Namen der Textlink bekommt.

Checkbox

<input type="checkbox" name="box1" checked> Neues Handy<input type="checkbox" name="box2" nochecked> Zimmer aufräumen<input type="checkbox" name="box3" nochecked> Neues Fahrrad<input type="checkbox" name="box4" checked> Essen
Beispiel
Neues Handy
Zimmer aufräumen
Neues Fahrrad
Essen

input type=checkbox - darf NICHT verändert werden!
checked - Häkchen bereits vorhanden
nochecked - Häkchen noch nicht vorhanden
name="box1" - Wert für Parameter "name" ist zwingend erforderlich, im Beispiel "box1" bzw. "box2"

Select-Box

<select size="5"><option>Freund 1 aus A</option><option>Freund 2 aus B</option><option>Freund 3 aus C</option><option>Freund 4 aus D</option><option>Freund 5 aus E</option></select>
Beispiel
Freund 1 aus AFreund 2 aus BFreund 3 aus CFreund 4 aus DFreund 5 aus E


Natürlich geht das auch mit size="1", sodass man auswählen kann, welche Option man sehen möchte.
<select size="1"><option>Freund 1 aus A</option><option>Freund 2 aus B</option><option>Freund 3 aus C</option><option>Freund 4 aus D</option><option>Freund 5 aus E</option></select>
Beispiel
Freund 1 aus AFreund 2 aus BFreund 3 aus CFreund 4 aus DFreund 5 aus E

select size="ZAHL" - Beginn der Box, Zahl gibt die zunächst sichtbaren Reihen an.
/select - Alles hat ein Ende... auch die Select-Area, bitte nicht vergessen!

Inline-Scroll-Container

Eigentlich ist dies keine echte neue HTML-Funktion. Alles basiert auf dem