Wiki
Clone wikiUser Apps / KCode / Bilder
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|-|
Updated