Cowboy: Neu angelegt

2025-03-08T23:44:30Z

Neu angelegt

Neue Seite

<noinclude>{{Dokumentation/Dokuseite}}</noinclude>
{{TemplateData|JSON=
{ "description": "Diese Vorlage ermöglicht es, [[#Annotation|Texte auf Bildern zu platzieren]] (auch mit Link), [[#Bildzuschnitt|Bildausschnitte zu erstellen]] oder ein zweites Bild mit und ohne Rahmen in einem Bild darzustellen.",
"params": {
"image":
{ "label": "Dateiname",
"description": "Name der Datei, die als Hintergrundbild dient",
"type": "wiki-file-name",
"required": true,
"example": "Mona Lisa color restoration2.jpg" },
"imagemap":
{ "label": "Imagemapcode",
"description": "[[Hilfe:Imagemap|Imagemap]] in X/HTML-Format, die als Hintergrundbild dient <noexport>nicht gleichzeitig mit <code>image</code> angeben</noexport>.",
"type": "content",
"suggested": true,
"default": "image" },
"float":
{ "label": "Ausrichtung",
"description": "Ausrichtung im Seitenlayout; right / left / center / none",
"type": "line",
"suggested": true,
"default": "right",
"example": "left" },
"noframe":
{ "label": "ohne Rahmen",
"description": "Bild ohne Rahmen ausgeben",
"type": "boolean",
"suggested": false,
"default": "0",
"example": "1" },
"caption":
{ "label": "Beschriftung",
"description": "Bildbeschriftung, die in der Bildlegende angezeigt werden soll",
"type": "line",
"suggested": true,
"example": "Mund-Nasenpartie der Mona Lisa" },
"alt":
{ "label": "Alternativtext",
"description": "Alternative Bildbeschreibung für Sehbehinderte",
"type": "line",
"suggested": false,
"example": "Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt" },
"page":
{ "label": "Seitenzahl",
"description": "Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter <code>image</code> ein PDF ist.",
"type": "line",
"suggested": false },
"annotations":
{ "label": "Bildanmerkungen",
"description": "Auf dem Bild platzierte Anmerkungen eingebunden über die [[Vorlage:Annotation]]",
"type": "content",
"suggested": true,
"example": "{{Zeichen*|{|2}}Annotation{{!}}left=120{{!}}top=50{{!}}text=Nase{{!}}font-size=16{{!}}font-weight=bold{{!}}color=#000000{{Zeichen*|}|2}}" },
"annot-font-size":
{ "label": "Schriftgröße Anmerkung",
"description": "Schriftgröße in Pixeln (ohne “<code>px</code>”) der auf dem Bild platzierten Anmerkungen verändern.",
"type": "number",
"suggested": false,
"example": "12" },
"annot-color":
{ "label": "Schriftfarbe Anmerkung",
"description": "Farbattribute der auf dem Bild platzierten Anmerkungen ändern <noexport>Farbname <code>white</code> oder hexadezimaler Farbwert<code>#FFFFFF</code></noexport>.",
"type": "line",
"suggested": false,
"example": "#DFDFDF" },
"annot-font-family":
{ "label": "Schriftart Anmerkung",
"description": "Schriftart der auf dem Bild platzierten Anmerkungen ändern.",
"type": "line",
"suggested": false,
"example": "monospace" },
"annot-font-style":
{ "label": "Schriftstyle Anmerkung",
"description": "Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.",
"type": "line",
"suggested": false,
"example": "italic" },
"annot-text-align":
{ "label": "Textausrichtung Anmerkung",
"description": "Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.",
"type": "line",
"suggested": false,
"default": "left",
"example": "right" },
"annot-background-color":
{ "label": "Schrifthintergrund Anmerkung",
"inherits": "annot-color" },
"annot-line-height":
{ "label": "Zeilenabstand Anmerkung",
"description": "Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen <noexport>Falls mehrere Anmerkungen direkt untereinander stehen</noexport>.",
"type": "line",
"suggested": false,
"example": "12" },
"image-width":
{ "label": "Bildbreite",
"description": "Angabe als natürliche Zahl in Pixeln (ohne “<code>px</code>”)",
"type": "number",
"required": true,
"example": "2000" },
"width":
{ "label": "Ausschnittsbreite",
"description": "Angabe als natürliche Zahl in Pixeln (ohne “<code>px</code>”) <noexport>Nicht größer als das Bild <code>image-width</code> selbst.</noexport>",
"type": "number",
"suggested": true,
"example": "250" },
"height":
{ "label": "Ausschnittshöhe",
"inherits": "width" },
"image-left":
{ "label": "Abstand links",
"description": "Angabe als ganze Zahl in Pixeln (ohne “<code>px</code>”) <noexport>X-Koordinate relativ zum linken Rand des Kastens, negative Werte schneiden das Bild zu.</noexport>",
"type": "number",
"suggested": true,
"default": "0",
"example": "-850" },
"image-top":
{ "label": "Abstand oben",
"description": "Angabe als negative ganze Zahl in Pixeln (ohne “<code>px</code>”)<noexport>Y-Koordinate relativ zum oberen Rand des Kastens, negative Werte schneiden das Bild zu.</noexport>",
"type": "number",
"suggested": true,
"default": "0",
"example": "-850" },

"outer-css":
{ "label": "Außenrahmen",
"description": "[[Cascading Style Sheets|CSS]]-Attribute wie Rahmenfarbe",
"type": "string",
"required": false,
"example": "border: 1px solid #00FFFF" },
"inner-css":
{ "label": "Innenrahmen",
"inherits": "outer-css" }
},
"format": "block lead"
}
|TOC=1}}

== Kopiervorlagen ==
Alle Parameter sind mit Namen versehen. Zwei der Parameter schließen sich gegenseitig aus, image und imagemap.
; Alle Parameter
<syntaxhighlight lang="wikitext" copy>
{{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 =
}}
</syntaxhighlight>

; [[#Annotation|Annotation]]
<syntaxhighlight lang="wikitext" copy>
{{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 =
}}
</syntaxhighlight>

; [[#Bildzuschnitt|Bildausschnitt]]
<syntaxhighlight lang="wikitext" copy>
{{Annotiertes Bild
| image =
| imagemap =
| float =
| noframe =
| caption =
| alt =
| page =

| image-width =
| image-left =
| image-top =
| width =
| height =
| outer-css =
| inner-css =
}}
</syntaxhighlight>

==== Annotation ====
{{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
}}
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:

<syntaxhighlight lang="wikitext" copy>
{{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
}}
</syntaxhighlight>
{{Absatz}}

==== Bildzuschnitt ====
Beim Beispielbild [[:Datei:Mona Lisa color restoration2.jpg]] sollen nur Nase und Mundwinkel gezeigt werden:
{| class="toptextcells"
|-
| [[Datei:Mona Lisa color restoration2.jpg|mini|300px|Die Ursprungsbreite des Bildes von 300 Pixeln ist bei Verwendung dieser Vorlage unerheblich]]
| [[Datei:Monalisa.svg|mini|300px|Übersicht]]
|-
| colspan="2"| Durch folgende Vorlage wird der Ausschnitt erzeugt:
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 2000
| image-left = -850
| image-top = -800
| width = 250
| height = 250
| caption = Bildausschnitt
}}
<syntaxhighlight lang="wikitext" copy>
{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 2000
| image-left = -850
| image-top = -800
| width = 250
| height = 250
| caption = Bildausschnitt
}}
</syntaxhighlight>
Das Ergebnis ist ein Bild von 250 x 250 Pixeln aus dem Originalbild von 2000 Pixeln Breite:
|}

=== Bildvergrößerung im Bild ===
{{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
}}
<syntaxhighlight lang="wikitext" copy>
{{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
}}
</syntaxhighlight>

=== Anderes Bild im Bild ===
==== Mit doppeltem Rahmen ====
Ohne den Parameter <code>noframe</code>, mit <code>inner-css</code>.
{{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
}}

<syntaxhighlight lang="wikitext" copy>
{{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
}}
</syntaxhighlight>

==== Mit Rahmen ====
Mit den Parametern <code>noframe</code> und <code>inner-css</code> für einen grünen Rand.
{{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
}}

<syntaxhighlight lang="wikitext" copy>
{{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
}}
</syntaxhighlight>

==== Ohne Rahmen ====
Mit den Parametern <code>noframe</code> und <code>inner-css</code> border:none.

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

<syntaxhighlight lang="wikitext" copy>
{{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
}}
</syntaxhighlight>

==== Mit dünnem weißem Rahmen ====
Mit den Parametern <code>noframe</code>, ohne <code>inner-css</code>.
{{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
}}

<syntaxhighlight lang="wikitext" copy>
{{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
}}
|}
</syntaxhighlight>

== Siehe auch ==
* [[Vorlage:Annotation]]
* [[Vorlage:Große Imagemap]]
<includeonly>
{{Lua-Vorlage|TemplUtl #faculty}}

[[Kategorie:Vorlage:Formatierungshilfe/Medien]]
</includeonly>

Vorlage:Annotiertes Bild/Doku - Versionsgeschichte

Cowboy: Neu angelegt