Zum Inhalt springen

Vorlage:Annotiertes Bild

aus Wikipedia, der freien Enzyklopädie


Diese Vorlage ermöglicht es, Texte auf Bildern zu platzieren (auch mit Link), Bildausschnitte zu erstellen oder ein zweites Bild mit und ohne Rahmen in einem Bild darzustellen.

Vorlagenparameter

Dateinameimage
Name der Datei, die als Hintergrundbild dient
Beispiel
Mona Lisa color restoration2.jpg
Imagemapcodeimagemap
Imagemap in X/HTML-Format, die als Hintergrundbild dient
nicht gleichzeitig mit image angeben.
Standard
image
Ausrichtungfloat
Ausrichtung im Seitenlayout; right / left / center / none
Standard
right
Beispiel
left
ohne Rahmennoframe
Bild ohne Rahmen ausgeben
Standard
0
Beispiel
1
Beschriftungcaption
Bildbeschriftung, die in der Bildlegende angezeigt werden soll
Beispiel
Mund-Nasenpartie der Mona Lisa
Alternativtextalt
Alternative Bildbeschreibung für Sehbehinderte
Beispiel
Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt
Seitenzahlpage
Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.
Bildanmerkungenannotations
Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation
Beispiel
{{Annotation|left=120|top=50|text=Nase|font-size=16|font-weight=bold|color=#000000}}
Schriftgröße Anmerkungannot-font-size
Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern.
Beispiel
12
Schriftfarbe Anmerkungannot-color
Farbattribute der auf dem Bild platzierten Anmerkungen ändern
Farbname white oder hexadezimaler Farbwert#FFFFFF.
Beispiel
#DFDFDF
Schriftart Anmerkungannot-font-family
Schriftart der auf dem Bild platzierten Anmerkungen ändern.
Beispiel
monospace
Schriftstyle Anmerkungannot-font-style
Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.
Beispiel
italic
Textausrichtung Anmerkungannot-text-align
Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.
Standard
left
Beispiel
right
Schrifthintergrund Anmerkungannot-background-color
Farbattribute der auf dem Bild platzierten Anmerkungen ändern
Farbname white oder hexadezimaler Farbwert#FFFFFF.
Beispiel
#DFDFDF
Zeilenabstand Anmerkungannot-line-height
Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen
Falls mehrere Anmerkungen direkt untereinander stehen.
Beispiel
12
Bildbreiteimage-width
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Beispiel
2000
Ausschnittsbreitewidth
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Nicht größer als das Bild image-width selbst.
Beispiel
250
Ausschnittshöheheight
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Nicht größer als das Bild image-width selbst.
Beispiel
250
Abstand linksimage-left
Angabe als ganze Zahl in Pixeln (ohne “px”)
X-Koordinate relativ zum linken Rand des Kastens, negative Werte schneiden das Bild zu.
Standard
0
Beispiel
-850
Abstand obenimage-top
Angabe als negative ganze Zahl in Pixeln (ohne “px”)Y-Koordinate relativ zum oberen Rand des Kastens, negative Werte schneiden das Bild zu.
Standard
0
Beispiel
-850
Außenrahmenouter-css
CSS-Attribute wie Rahmenfarbe
Beispiel
border: 1px solid #00FFFF
Innenrahmeninner-css
CSS-Attribute wie Rahmenfarbe
Beispiel
border: 1px solid #00FFFF

Diese Vorlage ermöglicht es, Texte auf Bildern zu platzieren (auch mit Link), Bildausschnitte zu erstellen oder ein zweites Bild mit und ohne Rahmen in einem Bild darzustellen.

Vorlagenparameter[Vorlagendaten bearbeiten]

Diese Vorlage hat eine benutzerdefinierte Formatierung.

ParameterBeschreibungTypStatus
Dateinameimage

Name der Datei, die als Hintergrundbild dient

Beispiel
Mona Lisa color restoration2.jpg
Dateierforderlich
Imagemapcodeimagemap

Imagemap in X/HTML-Format, die als Hintergrundbild dient .

Standard
image
Wikitextvorgeschlagen
Ausrichtungfloat

Ausrichtung im Seitenlayout; right / left / center / none

Standard
right
Beispiel
left
Einzeiliger Textvorgeschlagen
ohne Rahmennoframe

Bild ohne Rahmen ausgeben

Standard
0
Beispiel
1
Wahrheitswertoptional
Beschriftungcaption

Bildbeschriftung, die in der Bildlegende angezeigt werden soll

Beispiel
Mund-Nasenpartie der Mona Lisa
Einzeiliger Textvorgeschlagen
Alternativtextalt

Alternative Bildbeschreibung für Sehbehinderte

Beispiel
Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt
Einzeiliger Textoptional
Seitenzahlpage

Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.

Einzeiliger Textoptional
Bildanmerkungenannotations

Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation

Beispiel
{{Annotation|left=120|top=50|text=Nase|font-size=16|font-weight=bold|color=#000000}}
Wikitextvorgeschlagen
Schriftgröße Anmerkungannot-font-size

Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern.

Beispiel
12
Zahlenwertoptional
Schriftfarbe Anmerkungannot-color

Farbattribute der auf dem Bild platzierten Anmerkungen ändern .

Beispiel
#DFDFDF
Einzeiliger Textoptional
Schriftart Anmerkungannot-font-family

Schriftart der auf dem Bild platzierten Anmerkungen ändern.

Beispiel
monospace
Einzeiliger Textoptional
Schriftstyle Anmerkungannot-font-style

Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.

Beispiel
italic
Einzeiliger Textoptional
Textausrichtung Anmerkungannot-text-align

Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.

Standard
left
Beispiel
right
Einzeiliger Textoptional
Schrifthintergrund Anmerkungannot-background-color

Farbattribute der auf dem Bild platzierten Anmerkungen ändern .

Beispiel
#DFDFDF
Einzeiliger Textoptional
Zeilenabstand Anmerkungannot-line-height

Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen .

Beispiel
12
Einzeiliger Textoptional
Bildbreiteimage-width

Angabe als natürliche Zahl in Pixeln (ohne “px”)

Beispiel
2000
Zahlenwerterforderlich
Ausschnittsbreitewidth

Angabe als natürliche Zahl in Pixeln (ohne “px”)

Beispiel
250
Zahlenwertvorgeschlagen
Ausschnittshöheheight

Angabe als natürliche Zahl in Pixeln (ohne “px”)

Beispiel
250
Zahlenwertvorgeschlagen
Abstand linksimage-left

Angabe als ganze Zahl in Pixeln (ohne “px”)

Standard
0
Beispiel
-850
Zahlenwertvorgeschlagen
Abstand obenimage-top

Angabe als negative ganze Zahl in Pixeln (ohne “px”)

Standard
0
Beispiel
-850
Zahlenwertvorgeschlagen
Außenrahmenouter-css

CSS-Attribute wie Rahmenfarbe

Beispiel
border: 1px solid #00FFFF
Mehrzeiliger Textoptional
Innenrahmeninner-css

CSS-Attribute wie Rahmenfarbe

Beispiel
border: 1px solid #00FFFF
Mehrzeiliger Textoptional

Kopiervorlagen

[Quelltext bearbeiten]

Alle Parameter sind mit Namen versehen. Zwei der Parameter schließen sich gegenseitig aus, image und imagemap.

Alle Parameter
{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| annot-font-size = 
| annot-color = 
| annot-font-family = 
| annot-text-align = 
| annot-background-color= 
| annot-font-weight = 
| annot-font-style = 
| annot-line-height = 
| annotations =

| image-width = 
| image-left = 
| image-top = 
| width = 
| height = 
| outer-css = 
| inner-css = 
}}
Annotation
{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| annot-color = 
| annot-background-color= 
| annot-font-family = 
| annot-font-size =
| annot-font-weight = 
| annot-font-style = 
| annot-text-align = 
| annot-line-height = 
| annotations =

| image-width = 
| outer-css = 
| inner-css = 
}}
Bildausschnitt
{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| image-width = 
| image-left = 
| image-top = 
| width = 
| height = 
| outer-css = 
| inner-css = 
}}
alternative Beschreibung
Himmel
Horizont
Meer
Ein annotiertes Bild

Zusammen mit der Vorlage:Annotation, die für die Darstellung der einzelnen Textlabels zuständig ist, lassen sich so beliebige Texte und Links auf einem Bild positionieren:

{{Annotiertes Bild
| image = Pacific_Ocean_-_panoramio_-_---%3DXEON%3D---_(1).jpg
| image-width = 400
| annot-color = #000000
| annot-font-weight = normal
| annot-font-size = 18
| annotations = 
{{Annotation|left=290|top=66 |text=Himmel}}
{{Annotation|left=167|top=147|text=Horizont| font-size=16 | font-weight=bold | color=#FFFFFF}}
{{Annotation|left=56 |top=233|text=Meer| font-size=16 | font-weight=bold | color=#FFFFFF}}
| caption = Ein annotiertes Bild
}}

Bildzuschnitt

[Quelltext bearbeiten]

Beim Beispielbild Datei:Mona Lisa color restoration2.jpg sollen nur Nase und Mundwinkel gezeigt werden:

Die Ursprungsbreite des Bildes von 300 Pixeln ist bei Verwendung dieser Vorlage die wichtigste Größe.
Die fünf Größen, die den Bildausschnitt auswählen: image-width legt den Skalierungsbild des Bildes fest. Steht dort die originale Bildgröße, wird das Bild nicht skaliert. Steht dort die doppelte Größe, wird die Bildgröße verdoppelt u.s.w.
image-left ist meist eine negative Zahl und schneidet Pixel links im (ggf. reskalierten) Bild ab.
image-top ist meist eine negative Zahl und schneidet Pixel oben im (ggf. reskalierten) Bild ab.
width und height beschreiben die finale Bildgröße durch Abschneiden (oder Hinzufügen von weißen) Pixeln am rechten und unteren Rand.
Durch folgende Vorlage wird der Ausschnitt erzeugt:
alternative Beschreibung
Bildausschnitt Pixel 128...167 x 120...159
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg 
| image-width = 1800 
| image-left = -768
| image-top = -720
| width = 240
| height = 240
| caption = Bildausschnitt der Pixel 128...167 × 120...159
}}
image = Mona Lisa color restoration2.jpg
Der Name des Bildes ohne Protokoll (https://), Hostname (commons.wikimedia.org) und Pfad (/wiki/File:)
https://commons.wikimedia.org/wiki/File:Mona Lisa color restoration2.jpg Mona Lisa color restoration2.jpg
image-width = 1800
Die neue Breite des Bildes: Da das alte Bild im Original 300 Pixel breit war, wird das Bild erst einmal um den Faktor vergrößert.
Alle folgenden Werte beziehen sich auf dieses um den Faktor 6 vergrößerte neue Bild! Von diesem wird oben und links was abgeschnitten und dann das Bild ausgewählt.
image-left = -768
Es werden +768 Pixel vom linken Rand des vergrößerten neuen Bildes abgeschnitten.
Das entspricht Pixel im originalen Bildes.
image-top = -720
Es werden +720 Pixel vom oberen Rand des vergrößerten neuen Bildes abgeschnitten.
Das entspricht Pixel des originalen Bildes.
width = 240
Es werden horizontal 240 Pixel des vergrößerten neuen Bildes dargestellt.
Das entspricht horizontale Pixel des originalen Bildes.
height = 240
Es werden vertikal 240 Pixel des vergrößerten neuen Bildes dargestellt.
Das entspricht vertikale Pixel des originalen Bildes.
Ergebnis

Im Endeffekt werden aus dem 300 × 260 Pixel großen Originalbild horizontal die Pixel 128...167 (40 Stück) und vertikal die Pixel 120...159 (40 Stück) dargestellt.


Bildvergrößerung im Bild

[Quelltext bearbeiten]
alternative Beschreibung
alternative Beschreibung
Nase-Mund-Partie der Mona Lisa
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 300
| outer-css = border: 8px outset #FFA500
| annotations =
{{Annotation|left=150|top=120|text=
{{Annotiertes Bild
| noframe = 1
| inner-css = border: 1px dashed
| image = Mona Lisa color restoration2.jpg
| image-width = 1000
| image-left = -425
| image-top = -400
| width = 110
| height = 110
}}
}}
| caption = Nase-Mund-Partie der Mona Lisa
}}

Anderes Bild im Bild

[Quelltext bearbeiten]

Mit doppeltem Rahmen

[Quelltext bearbeiten]

Ohne den Parameter noframe, mit inner-css.

alternative Beschreibung
alternative Beschreibung
Ludwigsdorfer Friedenseiche
{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:5px; border-color:#00ff00; border-style:solid;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Mit den Parametern noframe und inner-css für einen grünen Rand.

alternative Beschreibung
alternative Beschreibung
Ludwigsdorfer Friedenseiche
{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:5px; border-color:#00ff00; border-style:solid;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Mit den Parametern noframe und inner-css border:none.

alternative Beschreibung
alternative Beschreibung
Ludwigsdorfer Friedenseiche
{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:none;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Mit dünnem weißem Rahmen

[Quelltext bearbeiten]

Mit den Parametern noframe, ohne inner-css.

alternative Beschreibung
alternative Beschreibung
Ludwigsdorfer Friedenseiche
{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}
|}

Lua

Verwendetes Modul: TemplUtl #faculty