Ramnips Homepage-Help      www.chathomepage.de  
Specials





Popupfenster-Hyperlink

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

Beispiel:
Nippis Homepage

<a href="javascript:window.open('http://www.knuddels.de/hp/nippi', 'Name', 'menubar=no,status=no,toolbar=no,resizable=yes,scrollbars=yes, width=700,height=400');void(0);">Nippis Homepage</a>

Erläuterungen zu den Parametern:
'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

zurück nach oben



Laufende Objekte

<marquee direction="Richtung" scrollAmount="Zahl" height="Zahl" width="Zahl"> INHALT </marquee>

"Inhalt" wäre ein Bereich in dem man alles definieren kann, Texte, Tabellen, Bilder, uvm.
"Richtung": "up", "left", "right" oder "down"
"scrollAmount" ist die Geschwindigkeit, ich empfehle "1" - "10" zu verwenden.
height="Zahl" width="Zahl" - Breite und Höhe des Marquee-Bereiches

Beispiel:

Hallo !       Hallo !       Hallo !       Hallo !

Tipp für Sonderfunktion: behavior="alternate":
Fügt man den Zusatz behavior="alternate" ein,
so wandert das Objekt von Begrenzung zu Begrenzung und wieder zurück.

 <marquee behavior="alternate" direction="left" scrollAmount="4" height="100" width="200"> Hallo! </marquee>

Beispiel:

Hallo !Hallo !

Weitere Sonderfunktion: onmouseover="this.stop()" onmouseout="this.start()"
Fügt man diesen Zusatz ein, stoppt das Laufen der Inhalte beim Berühren des Inhaltsbereiches mit der Maus. Verlässt man den Bereich wieder laufen die Inhalte weiter.

 <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollAmount="2" height="100" width="200"> Hallo! Maus auf den Bereich ziehen!</marquee>

Beispiel:

Hallo! Maus auf den Bereich ziehen!

zurück nach oben



Bild bei Mausberührung wechseln

<span onMouseOver="imagechange.src='http://www..../bild2.jpg'" onMouseOut="imagechange.src='http://www..../bild1.jpg'">
<img src="http://www..../bild1.jpg" border="0" id="imagechange"></span>

Bild-URL wie gewünscht abändern - "id bzw. imagechange" bitte nicht abändern! Wenn man mehrere Bilder auf diesem Prinzip wechseln will, muss man jeweils andere ID's verwenden, z.b. imagechange2, imagechanged3,...
Der img-Code <img src="http://www..../bild.jpg" border="0" id="imagechange"> kann natürlich auch in einen Link-Code eingebettet werden. (daher border="0" schon vorbereitet)

Beispiel (ohne Link):


zurück nach oben



Bild bei Mausberührung ausblenden

<span onMouseOver="meinbild1.style.visibility='hidden'" onMouseOut="meinbild1.style.visibility='visible'">
<img src="http://www..../bild.jpg" id="meinbild1"></span>

Bild-URL wie gewünscht abändern - "id bzw. meindbild1" bitte nicht abändern! Wenn man mehrere Bilder auf diesem Prinzip ausblenden will, muss man jeweils andere ID's verwenden, z.b. meindbild2, meindbild3,...

Beispiel:


Tipp: Einen weiteren Trick um Bilder zu "schützen" bieten Tabellen.
Folge dem Link:
Bildertrick.

zurück nach oben



Bildlink mit anschl. Texthinweisfenster

<a onfocus="this.blur()" href="JavaScript: alert(' Waldgebiet bei Hermsdorf ');"><img src="http://..../bild.jpg" border="0"></a>

Beispiel:


Erläuterungen zu den Parametern:
onfocus="this.blur()" - enfernt den beim Klicken auftretenden Punkt-Rahmen
alert(' Waldgebiet bei Hermsdorf ') - Den Text zwischen ' & ' festlegen
border="0" - bekannt aus dem img-tag, entfernt den Rahmen um das eingebundene Bild
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.

zurück nach oben



Bildlinkberührung mit anschl. Texthinweisfenster

<a href="#" onMouseover="alert('Ein Waldgebiet in Hermsdorf/Thüringen');"><img src="http://..../bild.jpg" border="0"></a>

Beispiel:


Erläuterungen zu den Parametern:
onfocus="this.blur()" - enfernt den beim Klicken auftretenden Punkt-Rahmen
alert(' Waldgebiet bei Hermsdorf ') - Den Text zwischen ' & ' festlegen
border="0" - bekannt aus dem img-tag, entfernt den Rahmen um das eingebundene Bild
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.

zurück nach oben



Textlink mit anschl. Texthinweisfenster

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

Beispiel:
Linktext

Erläuterungen zu den Parametern:
onfocus="this.blur()" - enfernt den beim Klicken auftretenden Punkt-Rahmen
alert(' Hallo zusammen! ') - Den Text zwischen ' & ' festlegen
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.

zurück nach oben



Textlinkberührung mit anschl. Texthinweisfenster

<a href="#" onMouseover="alert('Hallo...'); alert('Hier könnten nun Informationen stehen.\nAuch ein Zeilenumbruch ist möglich.'); alert('Ciao!');">Für weitere Informationen diesen Link berühren!</a>

Beispiel:
Für weitere Informationen diesen Link berühren!

Je mehr alert(' Text '); - Bereiche man einfügt, desto mehr Fenster erscheinen in dieser Reihenfolge - Trennung zwischen den einzelenen Ketten jeweils durch ein Semikolon.
Tipp: Der String "\n" definiert einen Zeilenumbruch im Text des Hinweisfensters.

zurück nach oben



Link-Button

Einbaucode wenn sich die Seite in einem neuen Fenster öffnen soll:

<input type="button" value="Ramnips Farbtabelle" onClick="popup=window.open('http://www.chatfarben.de/')">

Beispiel:


value="Ramnips Farbtabelle" legt die Buttonbezeichnung fest


Einbaucode wenn sich die Seite im aktuellen Fenster öffnen soll:

<input type="button" value="Knuddels" onclick="location='http://www.knuddels.de/'">


Design-Tipp:
Buttons mit Effekten aufpeppen

zurück nach oben



Klick- / Doppelklick-Button mit anschl. Texthinweis

<input type="button" onClick="JavaScript: alert(' Hallo \n *gg* ');" value="Hier einmal klicken">

Ergebnis:

<input type="button" ondblclick="JavaScript: alert(' Doppel-Hallo \n *gg* ');" value="Hier doppelklicken">

Ergebnis:

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.

Design-Tipp:
Buttons mit Effekten aufpeppen

zurück nach oben



Klick-Button mit wechselndem Button-Text

<form name="ramnipshphelpbuttchange01"><input type="button" value=" Klicke hier und ... " onClick="document.forms['ramnipshphelpbuttchange01'].elements[0].value=' ... fertig ist der Salat! '"></form>

Ergebnis:

Tipp: Möchte man mehrere Buttons auf einer Homepage einbauen, muss für jeden Code ein neuer Buttonname gewählt werden. Am einfachsten erhöht man den rot markierten Zahlwert um eins pro neuem Code - also 02, 03, 04, ...

Design-Tipp:
Buttons mit Effekten aufpeppen

zurück nach oben



Special: Buttons mit Effekten aufpeppen

Die oben gezeigten Button-Specials können mit CSS- und Scripteffekten versehen werden. Das nötige Tag ist dabei immer <input>, welches mit den CSS-Paramentern und/oder Scriptanweisungen ausgestattet wird!

Beispiel: Gestylter Effekt-Button


<input type="button" style="font-family:Comic Sans MS; font-size:14pt; color:#FFFFFF; background-color:#0000FF; border:1px #000000 solid;" onfocus="this.blur()" onMouseover="this.style.backgroundColor='#9F0000'" onMouseout="this.style.backgroundColor='#0000FF'" onClick="JavaScript: alert(' Dieser Button wurde mit Effekten versehen. ');" value="Hier einmal klicken">

Erläuterungen zu den Paramentern:

font-family:Comic Sans MS; - festlegen der Schriftart, hier Comic Sans MS
font-size:14pt; - festlegen der Schriftgröße, hier 14pt
color:#FFFFFF - festlegen der Schriftfarbe, hier weiß
background-color:#0000FF; - festlegen der Hintergrundfarbe, hier blau
border:1px #000000 solid; - festlegen eines Rahmens, hier 1 Pixel, schwarz und durchgehend

onfocus="this.blur()" - Entfernt den gepunkteten Rahmen beim Klick auf den Button

onMouseover="this.style.backgroundColor='#9F0000'"
Bei Mausberührung färbt sich der Hintergrund, hier in einen Rot-Wert

onMouseout="this.style.backgroundColor='#0000FF'"
Beim Verlassen des Bereiches färbt sich die Farbe wieder in den Blau-Wert zurück. Natürlich kann auch eine ganz andere Farbe definiert werden.

Möchte man gewisse Effekte nicht erzielen, lässt man die entsprechenden Parameter einfach weg.
Die in style=" " eingeschlossenen CSS-Parameter kann man natürlich noch erweitern. Beispielsweise erzielt das Eninfügen von width="ZAHLpx" und height="ZAHLpx" eine feste Größe für den Button. Auch kann statt "solid" zum Beispiel der Wert "dashed" für den Parameter "border" verwendet werden um einen gestrichelten Rahmen zu erzielen. Ebenfalls kann die Rahmenstärke durch Erhöhung des des Werts "1px" angepasst werden. Ein bisschen Probieren hilft hier weiter.

zurück nach oben



Checkbox

Neuer PC
Neues Auto
Neues Fahrrad
Neue Freundin

<input type="checkbox" name="box1" checked> Neuer PC
<input type="checkbox" name="box2" nochecked> Neues Auto
<input type="checkbox" name="box3" nochecked> Neues Fahrrad
<input type="checkbox" name="box4" checked> Neue Freundin

Erläuterungen zu den Tags

<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"

zurück nach oben



Textarea

Die Textarea nennt sich nicht zum Spass Textarea!
HTML oder sonstige Codier-Funktionen sind in einer Textarea nicht möglich!
Wichtig: Der Knuddels-Homepageditor erkennt den manuellen Zeilenumbruch (Enter-Taste) als HTML-Befehl für den Zeilenumbruch (also <br>). Dieses Tag würde dann mit eingefügt werden, ohne dass es der Nutzer wollte.
Text in der Area muss daher fortlaufend und ohne Zeilenumbruch eingepflegt werden. Für wen dies gestalterisch nicht in Frage kommt, sei der Absatz Inline-Scroll-Container weiter unten empfohlen.

Wir unterscheiden 3 Arten



<textarea readonly cols="35" rows="1">Hallo du da</textarea>




<textarea readonly cols="18" rows="4">Hier schreiben wir mal einen etwas längeren Text rein, denn dann sollte das Scrollen möglich sein.</textarea>




<textarea readonly cols="45" rows="3">So gehts natürlich auch!</textarea>


Erläuterungen zu den Tags

<textarea readonly cols="ZAHL" rows="ZAHL"> - Beginn der Area, Parameter "readonly" weist an, dass der Betrachter den Text nicht ändern kann (soll er es können, readonly einfach weglassen)
cols(Zahl) definiert die waagerechten Zeicheneinheiten, rows(Zahl) die Reihen nach unten.
</textarea> - Schließtag der Area, bitte nicht vergessen!


Design-Tipp: Man kann jede der 3 Textarea-Arten mit CSS aufpeppen! Erklärung am Beispiel:



<textarea readonly cols="18" rows="4" style="color:#FFBF00; font-family:Times New Roman; font-size:15pt; background-color:#800000;">Hier schreiben wir mal einen etwas längeren Text rein, denn dann sollte das Scrollen möglich sein.</textarea>

Hier wurde per CSS eine andere Schriftfarbe sowie Hintergrundfarbe eingestellt. Ebenso wurde die Schriftart und Schriftgröße verändert.


Design-Tipp 2: Hintergrundbild in der Textarea
Um einen solchen Effekt zu erzielen bedient man sich der CSS Hintergrunddefinition,
die im style-Aufruf steht.



<textarea readonly cols="23" rows="6" style="color:#FF7F00; font-family:Arial; font-size:20pt; background-image:url(http://..../bild.jpg); background-repeat:repeat;">
Textinhalt...</textarea>

Wie im Beispiel zu sehen muss also diese CSS-Zusatzdefinition mit in den style="  "-Bereich, Trennung der Parameter immer durch ;
background-image:url(http://..../bild.jpg) / Adresse des Bildes
background-repeat:repeat / Bild wird über die Area wiederholt
background-attachment:fixed / Falls die Textarea scrollbar ist, bleibt das Bild beim Scrollen stehen. (einfach ein paar mal [Enter] in der Area drücken und dann scrollen!)

zurück nach oben



Select-Box

BeispielCodeErklärung
Normal
<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>
Eine normale Selectbox erzielt man, in dem man die "size" auf den selben Wert der vorhandenen <option>-Werte setzt, hier im Beispiel eben 5.
Scroll
<select size="3">
<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>
Um einen Scrolleffekt zu erzielen, vermindert man einfach die "size" im Verhältnis der tatsächlich vorhandenen <option>-Werte. Die Größe hier steht auf 3; die Anzahl der <option>-Werte beträgt jedoch 5 - so wird der Scrollbalken sichtbar.
Drop Down
<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>
Um ein Dropdown-Menü zu erzeugen, muss die "size" auf 1 gesetzt sein und die <option>-Werte müssen mindestens 2 an der Zahl sein, hier im Beispiel sind es wieder 5.

Erläuterungen zu den Tags:
<select size="ZAHL"> - Beginn der Box, Zahl gibt die zunächst sichtbaren Reihen an.
<option>Text</option> - Definiert die Textreihe, die erste <option> </option> wird auch als erstes angezeigt. Mehr Reihen, mehr <option>Text</option>
</select> - Alles hat ein Ende... auch die Select-Area, bitte nicht vergessen!

Design-Tipp: Man kann jede der 3 Select-Box-Arten mit CSS aufpeppen! Erklärung am Beispiel:

<select size="3" style="color:#CFCFCF; background-color:#00005F; font-family:Comic Sans MS; font-size:18pt;">
<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>

Hier wurde per CSS eine andere Schriftfarbe sowie Hintergrundfarbe eingestellt. Ebenso wurde die Schriftart und Schriftgröße verändert.

zurück nach oben



Fieldset

Ein Fieldset erzeugt eine Legende und eingeschlossenen Inhalt.

Das sind meine Freunde Freund 1 aus A
Freund 2 aus B
Freund 3 aus C


<fieldset style="width:200px">
<legend>Das sind meine Freunde</legend>
Freund 1 aus A
Freund 2 aus B
Freund 3 aus C
</fieldset>

Erläuterungen zu den Tags:

<fieldset style="width:200px"> - startet das Fieldset mit Breite 200
<legend> Text </legend> - Legendenbezeichnung
</fieldset> - das Schließ-Tag nicht vergessen

Design-Tipp:

Mit dem Zusatz <legend align="center"> kann die Legendenbezeichnung mittig dargestellt werden.

Eine Einfärbung des Rahmens ist durchaus möglich.
Ebenso können die typischen HTML-Tags innerhalb von <legend> und <fieldset> verwendet werden.
Erklärung an einem Beispiel:

Info TextTextText1
TextTextText2
TextTextText3


<fieldset style="width:200px; border-color:#AF00FF">
<legend align="center"><font size="5" color="#A00020">Info</font></legend>
<font size="3" color="#003F00">
<b>TextTextText1</b>
<u>TextTextText2</u>
<i>TextTextText3</i></font>
</fieldset>



zurück nach oben



Inline-Scroll-Container

Eigentlich ist dies keine echte neue HTML-Funktion. Alles basiert auf dem <div>-Tag. Der Inline-Scroll-Container ist also ein durch <div> bestimmter Bereich und hat den Nutzen mehrzeilige Informationen und Funktionen auf der Homepage in eine extra Box (Bereich) zu pressen um nur für diese Informationen ein Scrollen zu erzwingen.
Vorteil: Ein Bild-Background bleibt davon unberührt.
Wie schon angedeutet: Auch mit HTML kann darin gearbeitet werden!

Das sind meine Freunde
Freund 1 aus A
Freund 2 aus B
Freund 3 aus C
Freund 4 aus D
Freund 5 aus E
Freund 6 aus F
Freund 7 aus G

Hier ein Bild



<div style="overflow:auto; width:300px; height:95px; padding:5px; border:1px #009F00 solid;">
Das sind meine Freunde
Freund 1 aus A
Freund 2 aus B
Freund 3 aus C
Freund 4 aus D
Freund 5 aus E
Freund 6 aus F
Freund 7 aus G

Hier ein Bild
<img src="http://www..../bild.jpg"> </div>

Erläuterungen zu den Tags

<div style="overflow:auto; - Eröffnungs-Tag, mit dem wichtigen (!!) Parameter bzw. Attribut overflow:auto;
width:300px; height:95px; - Breite und Größe in Pixeln - Sind die Text- oder HTML-Ereignisse in der Höhe kleiner als die definierte "height", verschwindet der Scrollbalken (gleiches gilt genauso für die Breite)
padding:5px; - bestimmt den Abstand des Inhalts zum Rand des Containers, hier sind es 5 Pixel
border: 1px #009F00 solid; - Setzt einen 1 Pixel sarken, durchgehenden Rahmen mit dem Farbwert #009F00
</div> - das Schließ-Tag nicht vergessen
Hinweis: Wer kein padding oder border definieren möchte, entfernt diese Paramenter einfach aus dem Code. Selbstverständlich sind alle Werte frei veränderbar. Ganz nach den Wünschen des HP-Bastlers.


Design-Tipp: Fügt man dem <div> Tag den Parameter dir="rtl" hinzu, ist die Scrollbar auf der linken Seite zu sehen. Ich empfehle allerdings Texte, Bilder,... zu zentrieren, da diese sonst an die Scrollbar geklatscht werden.
Hinweis: Internet Explorer und Firefox können bei diesem Richtungswechsel "right-to-left" falsche bzw. ungewollte Ausgaben liefern. Der IE wirft Satzzeichen auf die falsche Seite, der FF rückt gleich die ganze Box auf die falsche Seite des Browsers.
Aus diesem Grund ummanteln wir die DIV-Box mit einer Tabellenkonstruktion und spannen den eigentlichen Textinhalt der Box in ein <span>-Tag mit dem rückwärtigen Richtungswechsel "left-to-right" ein.
So erzielen wir auf beiden Browsern die gleiche Anzeige und umgehen das Validierungsproblem.

Beispiel:

Das sind meine Freunde!
Freund 1 aus A
Freund 2 aus B
Freund 3 aus C
Freund 4 aus D
Freund 5 aus E
Freund 6 aus F
Freund 7 aus G

Hier ein Bild


<table border="0" cellpadding="0" cellpacing="0"><tr><td>
<div dir="rtl" style="overflow:auto; width:300px; height:95px;"><span dir="ltr">
<center>
Das sind meine Freunde!
Freund 1 aus A
Freund 2 aus B
Freund 3 aus C
Freund 4 aus D
Freund 5 aus E
Freund 6 aus F
Freund 7 aus G

Hier ein Bild
<img src="http://www..../bild.jpg">
</center>
</span></div>
</td></tr></table>


Design-Tipp 2: Einfügen eines gesonderten Hintergrundbildes

siehe oben - Textarea Design-Tipp 2 - funktioniert auf dem selben Prinzip.

zurück nach oben



Ein virtuelles Blatt Papier der DIN A4 Größe

Es folgt ein Blatt Papier, welches mit dem DIV-Tag und CSS-Formatierung erzeugt wird. Mann nennt diese Codierart auch Container.
Infos zu den einzelnen Parametern stehen schwarz auf weiß auf dem "Papier".
Für alle Zahlenfans: DIN A4 bemisst sich auf 21 x 29,7 cm. In der PC-Welt als Pixelabmessung ausgedrückt würde dies 926 x 1081 Pixel entsprechen. Da macht natürlich nicht jede Monitorauflösung mit. Zudem ist ein echtes DIN A4 Blatt auf dem PC-Monitor viel zu groß. Deshalb kann man das "Blatt" proportional stauchen. 463 x 541 Pixel entsprechen 50 %, 306 x 357 Pixel entsprechen 33 %, 232 x 270 Pixel entsprechen 25 %. Im Beispiel habe ich die 33% mit 306 x 357 Pixel gewählt.

<div style="background-color: #FFFFFF; border-right: #7F7FBF 1px solid; border-bottom: #7F7FBF 1px solid; padding: 5px; width: 306px; height: 357px; font-family: verdana; font-size: 8pt;"> Textinhalt ... </div>

background-color: #FFFFFF;
Hintergrundfarbe des div-Bereiches, hier weiß

border-right: #7F7FBF 1px solid;
rechter Rand, blaue Farbe, 1 Pixel stark sowie als durchgehende Linie

border-bottom: #7F7FBF 1px solid;
selbes Spiel wie beim rechten Rand

padding: 5px;
Abstand von Rand des div-Bereiches, hier 5 Pixel

width: 306px; height: 357px;
Breite & Höhe des div-Bereiches, hier 306 x 357

font-family: verdana;
Schriftart festlegen, hier Verdana

font-size: 8pt;
Schriftgröße festlegen, hier 8 pt

Hinweis: Wenn die Inhalte untereinander die Abmessung der Höhe übersteigen, wird der Bereich automatisch verlängert.
(gilt nicht für die horizont. Ausdehnung)

Übrigens: Man kann auf dem selben Prinzip eine Tabellenfunktion (das Tag <table>) auf diese Art ausstatten und den selben Effekt erzielen.

zurück nach oben



Das Knuddelsfenster mit HTML & CSS

... wurde wieder entfernt, da die Missbrauchsgefahr überwog.

zurück nach oben