Vorlage:Annotiertes Bild/Doku

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
Diese Seite ist die Dokumentations-Unterseite der Vorlage:Annotiertes Bild.
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

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
nicht gleichzeitig mit image angeben.
Standard
image
Inhaltvorgeschlagen
Ausrichtungfloat
Ausrichtung im Seitenlayout; right / left / center / none
Standard
right
Beispiel
left
Zeilevorgeschlagen
ohne Rahmennoframe
Bild ohne Rahmen ausgeben
Standard
0
Beispiel
1
Booleschoptional
Beschriftungcaption
Bildbeschriftung, die in der Bildlegende angezeigt werden soll
Beispiel
Mund-Nasenpatie der Mona Lisa
Zeilevorgeschlagen
Alternativtextalt
Alternative Bildbeschreibung für Sehbehinderte
Beispiel
Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpatie zeigt
Zeileoptional
Seitenzahlpage
Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.
Zeileoptional
Bildanmerkungenannotations
Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation
Beispiel
{{Annotation|120|50|Nase|font-size=16|font-weight=bold|color=#000000}}
Inhaltvorgeschlagen
Schriftgröße Anmerkungannot-font-size
Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern.
Beispiel
12
Nummeroptional
Schriftfarbe Anmerkungannot-color
Farbattribute der auf dem Bild platzierten Anmerkungen ändern
Farbname white oder hexadezimaler Farbwert#FFFFFF.
Beispiel
#DFDFDF
Zeileoptional
Schriftart Anmerkungannot-font-family
Schriftart der auf dem Bild platzierten Anmerkungen ändern.
Beispiel
monospace
Zeileoptional
Schriftstyle Anmerkungannot-font-style
Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.
Beispiel
italic
Zeileoptional
Textausrichtung Anmerkungannot-text-align
Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.
Standard
left
Beispiel
right
Zeileoptional
Schrifthintergrund Anmerkungannot-background-color
Farbattribute der auf dem Bild platzierten Anmerkungen ändern
Farbname white oder hexadezimaler Farbwert#FFFFFF.
Beispiel
#DFDFDF
Zeileoptional
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
Zeileoptional
Bildbreiteimage-width
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Beispiel
2000
Nummererforderlich
Ausschnittsbreitewidth
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Nicht größer als das Bild image-width selbst.
Beispiel
250
Nummervorgeschlagen
Ausschnittshöheheight
Angabe als natürliche Zahl in Pixeln (ohne “px”)
Nicht größer als das Bild image-width selbst.
Beispiel
250
Nummervorgeschlagen
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
Nummervorgeschlagen
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
Nummervorgeschlagen
Außenrahmenouter-css
CSS-Attribute wie Rahmenfarbe
Beispiel
border: 1px solid #00FFFF
Zeichenfolgeoptional
Innenrahmeninner-css
CSS-Attribute wie Rahmenfarbe
Beispiel
border: 1px solid #00FFFF
Zeichenfolgeoptional

Format: block lead align\n{{_\n| _ = _\n}}\n

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 = 
}}

Annotation[Quelltext bearbeiten]

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|290|66|Himmel}}
{{Annotation|167|147|Horizont| font-size=16 | font-weight=bold | color=#FFFFFF}}
{{Annotation|56|233|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 unerheblich
Übersicht
Durch folgende Vorlage wird der Ausschnitt erzeugt:
alternative Beschreibung
Bildausschnitt
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 2000
| image-left = -850
| image-top = -800
| width = 250
| height = 250
| caption = Bildausschnitt
}}

Das Ergebnis ist ein Bild von 250 x 250 Pixeln aus dem Originalbild von 2000 Pixeln Breite:

Bildvergrößerung im Bild[Quelltext bearbeiten]

alternative Beschreibung
alternative Beschreibung
Nasemundpartie der Mona Lisa
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 300
| outer-css = border: 8px outset #FFA500
| annotations = {{Annotation|150|120|
{{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 = Nasemundpartie 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|280|170|{{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 Rahmen[Quelltext bearbeiten]

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|280|170|{{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
}}

Ohne Rahmen[Quelltext bearbeiten]

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|280|170|{{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|280|170|{{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
}}
|}

Siehe auch[Quelltext bearbeiten]