Bilder

Eure Bots können im Chat neben Links oder Tabellen auch Bilder anzeigen lassen - hierzu ist wichtig zu wissen, dass alle Bilder immer mit °>BILD<° eingebunden werden. Eine Manipulation der Darstellung einzelner Bilder lässt sich mit weiteren Eigenschaften $PROPERTIES erweitern. Diese Erweiterung erfolgt durch sogenannte NameValue-Pair die durch ein angefügten Punkt .. genau definiert werden.

Standard-Einbindung eines Bildes:

Wichtig ist, dass ihr bei der Einbindung eines Bildes immer den Pfad zu dem jeweiligen Bilderordner als erstes angebt.

Schaut euch dafür am besten diese Seite an:

Zur Vereinfachung der Darstellung, wurde in den Beispielen die Einbindung des Pfades weggelassen.

#!
°>bild.gif<°

MouseOver-Effekte:

Neben der normalen Darstellung eines Bildes ist es auch möglich hover-Effekte darzustellen. bild1.gif steht für das Bild, welches sichtbar ist, wenn die Position des Cursors nicht auf der Grafik liegt. bild2.gif steht für das Bild, welches sichtbar ist, wenn die Position des Cursors auf der Grafik liegt.

#!
°>bild1.gif|bild2.gif<°

Wenn man nicht auf Buttons zurückgreifen möchte, sondern lieber selbst Schaltflächen gestallten möchte, so ist dies auch möglich. Hierbei gilt allerdings zu beachten, dass Links gebunden werden müssen. Dies ist entweder mittels >< oder >--< machbar. Bei der Definition von LINK habt ihr die Wahl zwischen Internetseiten oder Knuddelsfunktionen.

#!
°>bild_normal.gif|bild_hover.gif<>|LINK<°
°>bild_normal.gif|bild_hover.gif<>--<>|LINK<°
°>bild_normal.gif|bild_hover.gif<>--<>|LINK_LINKE_MAUSTASTE|LINK_RECHTE_MAUSTASTE<°

Funktionen zur Manipulation von Grafiken:

Funktionen mit NameValue-Pair

Name	Beschreibung	Value	Beispiel
w_	Containerbreite eines Bildes fest definieren	int	`.w_100`
h_	Containerhöhe eines Bildes fest definieren	int	`.h_100`
scalew_	Breite eines Bildes wird um X% skaliert. <100 = verkleinert; >100 = vergrößert	int	`.scalew_80`
scaleh_	Höhe eines Bildes wird um X% skaliert. <100 = verkleinert; >100 = vergrößert	int	`.scaleh_80`
mw_	Breite eines Bildes fest definieren	int	`.mw_100`
mh_	Höhe eines Bildes fest definieren	int	`.mh_100`
mx_	Position eines Bildes horizontal setzen	int	`.mx_100`
my_	Position eines Bildes vertikal setzen	int	`.my_100`
border_	Rahmen um ein Bild setzen	int	`.border_10`
shadow_	Bild einen Schatten setzen. Hierbei wird die Position des Schattens definiert	int	`.shadow_1`
quadcut_	Schneidet ein Bild in quadratische Größe zu	int	`.quadcut_50`
delay_	Bilder werden mit Verzögerung angezeigt	int	`.delay_20`
delayoff_	Bilder werden nach Verzögerung ausgeblendet	int	`.delayoff_20`
director_	Es werden die Frames von `n1` bis `n2` in GIFs endlos wiederholt.	int	`.director_n1:n2`
freeze_	Es wird nur ein bestimmter Frame eines GIFs angezeigt	int	`.freeze_2`
mousex_	Positioniert den Klickbereich einer Schaltfläche (Bild) horizontal	int	`.mousex_0`
mousey_	Positioniert den Klickbereich einer Schaltfläche (Bild) vertikal	int	`.mousey_0`
loadingImage_	Zeigt das angegebene Bild an sofern das Bild "heruntergeladen" wird.	URL	`.loadingImage_URL/image.png`
errorImage_	Konnte das Bild nicht geladen werden, wird das angegebene "Fehlerbild" angezeigt.	URL	`.errorImage_URL/bild.png`
opacity_	Setzt die Deckkraft eines Bildes in einer Range von 0 (unsichtbar) - 255 (komplett sichtbar).	int	`.opacity_75`
rmw_	Verkleinert das Bild auf die angegebene Breite, aber vergrößert es nicht falls es kleiner ist. Das Seitenverhältnis bleibt dabei erhalten.	int	`.rmw_100`
rmh_	Verkleinert das Bild auf die angegebene Höhe, aber vergrößert es nicht falls es kleiner ist. Das Seitenverhältnis bleibt dabei erhalten.	int	`.rmh_80`
center_	Man gibt an wieviele Pixel Breiter für das Bild freigehalten werden. Das Bild steht zentriert in diesem freien Platz (nur horizontal).	int	`.center_200`
bordercol_	Borderfarbe als RGB komma-separiert angeben.	RGB 0-255	`.hbordercol_255,0,255`
hbordercol_	Hoverfarbe der Border als RGB komma-separiert angeben, wenn Bild verlinkt	RGB 0-255	`.hbordercol_255,0,0`
recolor_	Färbt den nicht-transparenten Teil eines Bildes komplett mit der angegebenen Farbe ein.	RGB 0-255	`.recolor_255,0,0`
clippath_oval	Wandelt ein Bild in ein ovales Bild um.	-	`.bild...clippath_oval.jpg`
clippath_circle	Wandelt ein Bild in ein rundes Bild um.	-	`.bild...clippath_oval.jpg`

Labelfunktionen:

Name	Beschreibung	Value	Beispiel
label_	Labeltext auf ein Bild setzen	String	`.label_text`
lmx_	Position des Labeltextes horizontal verändern.	int	`.lmx_100`
lmy_	Position des Labeltextes vertikal verändern.	int	`.lmy_100`
labelcolor_	Labeltext in einen gewünschten RGB-Farbcode einfärben	int	`.labelcolor_255,0,0`
labelborder_	Labeltext einen Textrahmen setzen	int `0`,`1`	`.labelborder_1`
labelfontsize_	Schriftgröße des Labeltextes verändern	int	`.labelfontsize_20`

Name	Beschreibung	Value	Beispiel
clipx_	Setzt den horizontalen Anfangspunkt des Bildbereiches von der oberen linken Ecke	int	`._clipx_100`
clipy_	Setzt den vertikalen Anfangspunkt des Bildbereiches von der oberen linken Ecke	int	`._clipy_100`
clipw	Definiert die Breite des angezeigten Bildbereiches	int	`.clipw_100`
cliph	Definiert die Höhe des angezeigten Bildbereiches	int	`.cliph_100`

Funktionen ohne NameValue-Pair:

|Name|Beschreibung|Value|Beispiel |---------------------|--------------------------------|--------------------------------| |mirror|Spiegelt das Bild horizontal|.mirror| |gray|Wandelt das Bild in eine Graustufengrafik um|.gray| |nopush|Verhindert das verschieben des Bildes bei einem Klick|.nopush| |xrepeat|Wiederholt das Bild horizontal|.xrepeat| |yrepeat|Wiederholt das Bild vertikal|int|.yrepeat| |alwayscopy|Umgeht den Cache von Bildern. Das Bild wird immer in aktueller Form geladen und die gecachten Dateien werden dabei ignoriert.|.alwayscopy| |b|Positioniert ein Bild auf der Baseline|.b|

Noch fehlend/unbekannt:

|Name|Beschreibung|Value|Beispiel |---------------------|-----------------------------------------------------| |tx|-| |ty|-| |snapx|-| |snapy|-| |shuffled|-| |vtop|-| |hoveralign|-| |albborder|-| |minw|-| |minh|-| |grayDone|-| |click|-| |colorize|-| |colorizationcolor|-| |path|-| |ending|-| |cursor|-| |velocity|-| |imgfly|-| |bottomfade|-|

Wiki

User Apps / KCode / Bilder

Bilder

Standard-Einbindung eines Bildes:

MouseOver-Effekte:

Funktionen zur Manipulation von Grafiken: