3.11.1.4 Abbildungen zu einer Image Map erweitern

[unmarkierte Version]

Version vom 21. April 2016, 14:44 Uhr

Eine Grafik kann mit ImageMap nun auch mit einem Link gesetzt werden. Entweder in der einfachen Variante, sprich das gesamte Bild dient als Verknüpfungspunkt, oder in der filigraneren Variante mit einzelnen Bildbereichen.

Gesamtbildverlinkung auf interne Seite[]

Möchten Sie ein Bild mit einer LOOP-Seite verlinken, nutzen Sie den unteren Beispielcode. Mit dem Attribut Quickinfo ist der aufblinkende Text gemeint, der erscheint sobald man mit dem Mauszeiger über das Bild fährt.

Syntax:
[[Datei:Metabild.png|300px|Quickinfo|link=LOOP-Tutorial]]

Ergebnis:

Gesamtbildverlinkung auf externe Seite[]

Möchten Sie ein Bild mit einer externen Internetseite verlinken, setzen Sie den Link mit http/https-Präfix. In unteren Beispiel wird Sie das Bild auf die Seite von Google führen.

Syntax:
[[Datei:Metabild.png|300px|Quickinfo|link=https://www.google.de]]

Ergebnis:

Bildverlinkung mit einer angepasster ImageMap[]

Einfache Variante der ImageMap[]

Bei der einfachen Nutzung einer ImageMap fungiert das gesamte Bild als Verlinkungsnetz.

Syntax: <imagemap> Image:Metabild.png|300px|Titel default [[LOOP-Tutorial|Gehe zur Hauptseite]] </imagemap>

Ergebnis: <imagemap> Image:Metabild.png|300px|Titel default Gehe zur Hauptseite </imagemap>

Komplexe Variante der ImageMap[]

In der komplexen Variante der ImageMap können verschiedene Bildbereiche zu unterschiedlichen LOOP- bzw. externen Internetseiten verweisen. Grundlegend können drei verschiedene Flächen eingefügt werden: ein Kreis, ein Rechteck und/oder ein Polygon. Diese werden mit den jeweiligen Koordinaten bestückt und spannen sich über einen definierten Bildausschnitt, der als Verlinkungsfläche dient. Die konkrete Angabe der Koordinaten sieht dann wie folgt aus:

Polygon: poly x1 y1 x2 y2 x3 y3 x4 y4 ... [[Quickinfo|Link]]

Rechteck: rect x1 y1 x2 y2 [[Quickinfo|Link]]

Kreis: circle x y r [[Quickinfo|Link]]

Dabei sind x1 & y1 zusammengehörige Bildkoordinaten bezüglich eines Bildpunktes. Einzig bei der Angabe einer Kreisfläche wird der Bildmittelpunkt (x,y) und als weitere Angabe der Radius (r) in Pixel angegeben.

Wichtig

Die Art der Verlinkung zu internen LOOP-Seiten und zu externen Seiten unterscheidet sich von einander!

intern Verl. [[Link|Quickinfo]]
extern Verl. [Link Quickinfo]

In diesem Beispielbild mit wurden die drei Formen A, B, C mit den zur Verfügung stehenden Flächen Kreis, Polygon und Rechteck abgedeckt. Diese flächige Sprungmarken führen zu Wikipedia-Seiten der entsprechenden geometrischen Form.

Syntax: <imagemap> Image:Testbild_IM.png|450px|Titel

circle 105 115 45 [https://de.wikipedia.org/wiki/Kreis Kreis]

poly 260 224 266 95 303 56 405 83 368 249 280 223 [https://de.wikipedia.org/wiki/ Polygon Polygon]

rect 140 204 230 343 [https://de.wikipedia.org/wiki/Rechteck Rechteck] </imagemap>

Ergebnis: <imagemap> Image:Testbild_IM.png|450px|Titel

circle 105 115 45 Kreis

poly 260 224 266 95 303 56 405 83 368 249 280 223 Polygon

rect 140 204 230 343 Rechteck </imagemap>

Hinweis

Weitere Hinweise finden Sie unter:

Online Image Map Editor: http://www.maschek.hu/imagemap/imgmap

Wiki auf deutsch: http://wikis.zum.de/zum/Hilfe:ImageMap

Wiki auf englisch: https://www.mediawiki.org/wiki/Extension:ImageMap

@@ Zeile 5: / Zeile 5: @@
 Möchten Sie ein Bild mit einer LOOP-Seite verlinken, nutzen Sie den unteren Beispielcode. Mit dem Attribut <tt>Quickinfo</tt> ist der aufblinkende Text gemeint, der erscheint sobald man mit dem Mauszeiger über das Bild fährt.
-<loop_area type="example">
 '''Syntax:'''<br \>
 <code>[[Datei:Metabild.png|300px|Quickinfo|link=LOOP-Tutorial]]</code>
@@ Zeile 11: / Zeile 10: @@
 '''Ergebnis:'''<br \>
 [[Datei:Metabild.png|300px|Quickinfo|link=LOOP-Tutorial]]
-</loop_area>
@@ Zeile 17: / Zeile 15: @@
 Möchten Sie ein Bild mit einer externen Internetseite verlinken, setzen Sie den Link mit http/https-Präfix. In unteren Beispiel wird Sie das Bild auf die Seite von Google führen.
-<loop_area type="example">
 '''Syntax:'''<br \>
 <code>[[Datei:Metabild.png|300px|Quickinfo|link=https://www.google.de]]</code>
@@ Zeile 23: / Zeile 20: @@
 '''Ergebnis:'''<br \>
 [[Datei:Metabild.png|300px|Quickinfo|link=https://www.google.de]]
-</loop_area>
 ===Bildverlinkung mit einer angepasster ImageMap===
@@ Zeile 30: / Zeile 26: @@
 Bei der einfachen Nutzung einer ImageMap fungiert das gesamte Bild als Verlinkungsnetz.
-<loop_area type="example">
 '''Syntax:'''
 <code><imagemap>
@@ Zeile 42: / Zeile 37: @@
 default [[LOOP-Tutorial|Gehe zur Hauptseite]]
 </imagemap>
-</loop_area>
 ====Komplexe Variante der ImageMap====
@@ Zeile 62: / Zeile 56: @@
 </loop_area>
-<loop_area type=example>
 In diesem Beispielbild mit wurden die drei Formen A, B, C mit den zur Verfügung stehenden Flächen Kreis, Polygon und Rechteck abgedeckt. Diese flächige Sprungmarken führen zu Wikipedia-Seiten der entsprechenden geometrischen Form.
@@ Zeile 88: / Zeile 81: @@
 rect 140 204 230 343 [https://de.wikipedia.org/wiki/Rechteck Rechteck]
 </imagemap>
-</loop_area>
+<loop_area type="notice">
 '''Weitere Hinweise finden Sie unter:'''<br \>
 Online Image Map Editor: http://www.maschek.hu/imagemap/imgmap<br \><br \>
@@ Zeile 96: / Zeile 88: @@
 Wiki auf deutsch: http://wikis.zum.de/zum/Hilfe:ImageMap<br \><br \>
-Wiki auf englisch: https://www.mediawiki.org/wiki/Extension:ImageMap
+Wiki auf englisch: https://www.mediawiki.org/wiki/Extension:ImageMap</loop_area>