Wiki-Quellcode von Bild

Zeige letzte Bearbeiter
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="XImage" size="4em"/}}
3
4 (% class="block%)Das Symbol für Elemente vom Typ //Bild//.
5 {{/panel}}
6
7 == Funktionsweise ==
8
9 {{figure image="designer_element_image_properties_base_de.png"}}
10 In den Darstellungseigenschaften für ein Bildelement kann direkt Größe in Pixel angegeben werden.
11 {{/figure}}
12
13 {{figure image="designer_element_image_csssize_de.png"}}
14 Die Größe eines Bildelements kann auch mittels //CSS// festgelegt werden.
15 {{/figure}}
16
17 Das Formularelement //Bild// fügt ein Bild in das aktuelle Formular ein und ist nur ein Designelement dessen Wert nicht beim Absenden des Formulars übertragen wird. Nach dem Einfügen des Bildelement muss die Bilddatei vom Desktop in den Eigenschaftenbereich //Bilder// per //Drag&Drop// gezogen werden, um das Bild in das Formular einzufügen.
18
19 Um die Größe eines Bildes festzulegen, stehen zwei Möglichkeiten zur Verfügung.
20
21 ; Angabe über die Eigenschaften
22 : Die Breite oder Höhe in Pixel kann direkt im rechten Bereich des {{designer case="gen"/}} eingestellt werden. Wird in der Eigenschaft //Höhe (in px)// oder //Breite in (px)// der Wert 0 gesetzt, so wird das entsprechende HTML-Attribut (//width// bzw. //height//) im HTML nicht gesetzt.
23 ; Angabe über CSS
24 : Größenangaben können auch direkt über //CSS// festgelegt werden. Legen Sie dazu im [[CSS-Bereich>>doc:Formcycle.Designer.Form.CodingPanel.CSSTab.WebHome]] eine neue Klasse an. Geben Sie dem Bildelement diese Klasse, indem Sie diese Klasse im rechten Bereich unter [[CSS-Klassen>>doc:Formcycle.Designer.Form.ElementProperties.CSSClasses]] anklicken.
25
26 {{internBaseOptionsElement page="base"}}
27
28 {{internBaseOptionsElement page="style"}}
29 {{table dataTypeAlpha="0" colWidth="-500"}}
30 |=Name|=Beschreibung
31 |Höhe (in px)|Gibt die Höhe des Bilds in Pixel an.
32 |Breite (in px)|Gibt die Breite des Bilds in Pixel an.
33 |Ausrichtung|Ändert die Ausrichtung (links, rechts, mitte) des Bildes.
34 {{/table}}
35 {{/internBaseOptionsElement}}
36
37 {{internBaseOptionsElement page="cond"/}}
38
39 {{internBaseOptionsElement page="label"}}
40 {{figure image="designer_element_image_properties_label.png"}}
41 Zusätzliche Einstellungen für den Bereich //Label//.
42 {{/figure}}
43
44 {{table dataTypeAlpha="0" colWidth="-500"}}
45 |=Name|=Beschreibung
46 |Title|Der Titel, der beim Überfahren des Bildes mit der Maus angezeigt. Erfolgt durch das HTML-Attribut //title//.
47 |Alt Text|Alternativer Text, der angezeigt wird, falls das Bild im Browser nicht angezeigt werden kann. Erfolgt durch das HTML-Attribut //alt//.
48 {{/table}}
49 {{/internBaseOptionsElement}}
50
51
52 {{id name="sec-image"/}}
53
54 == Bild ==
55
56 {{figure image="designer_element_image_drag_drop_upload_de.png" group="secImg"}}
57 Im Bereich //Bild// können Bilder auch direkt per Drag&Drop hochgeladen werden.
58 {{/figure}}
59
60 Im Bereich //Bild// finden sich alle Bilder, die für das Formular hochgeladen wurden. Um ein neues Bild hochzuladen, ziehen Sie es von Ihrem Computer aus dem Dateimanager (z.B. //Windows-Explorer//, //Finder// oder //Nautilus//) einfach per //Drag&Drop// in diesen Bereich hinein. Das Bild wird dann automatisch hochgeladen. Wenn Sie im {{designer case="dat"/}} bereits ein Bildelement ausgewählt haben, klicken Sie nun einfach auf das gewünschte Bild. Das ausgewählte Bild wird nun in dem Bildelement angezeigt.
61
62 Das Löschen eines Bildes erfolgt über das Löschen-Symbol {{icon name="times"/}} in der rechten oberen Ecke des Bildes.
63
64 {{internBaseOptionsElement page="css"/}}
65
66 {{internBaseOptionsElement page="help"/}}
67
68 {{internBaseOptionsElement page="attr"/}}
69
70 {{internBaseOptionsElement page="avail"/}}
71
72 {{internBaseOptionsElement page="ronly"/}}
73
74 {{internBaseOptionsElement page="misc"/}}
75
76 {{content moveToTop="true"/}}
77 {{/internBaseOptionsElement}}
78 {{/internBaseOptionsElement}}