3.11.1.4 Abbildungen zu einer Image Map erweitern

[unmarkierte Version]

[gesichtete Version]

Aktuelle Version vom 18. Mai 2016, 14:11 Uhr

Eine Grafik kann auch mit einem Link gesetzt werden. Entweder können Sie in der einfachen Variante das gesamte Bild mit internen oder externen Webseiten verlinken.

Oder Sie können in der komplexen Variante Teilbereiche des Bildes mit Links unterlegen. Solche (verweissensitive Grafiken lassen sich mit dem Tag <imagemap> ... </imagemap> erstellen.

Gesamtbildverlinkung auf interne Seite[]

Möchten Sie ein ganzes Bild mit einer LOOP-Seite verlinken, nutzen Sie die unten angezeigte Wiki-Syntax. Mit dem Attribut Quickinfo ist der Text gemeint, der erscheint, sobald man mit dem Mauszeiger über das Bild fährt.

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

Ergebnis:

Gesamtbildverlinkung auf externe Seite[]

Möchten Sie ein Bild mit einer externen Internetseite verlinken, setzen Sie den Link mit einer validen Internetadresse (http:// bzw. https://). In unteren Beispiel führt Sie der Link im Bild auf die Webseite von Google (http://www.google.de).

Syntax:
[[Datei:Beispielgrafik-Strom-Gas.png|300px| Quickinfo Google|link=https://www.google.de]]

Ergebnis:

Bildverlinkung mit ImageMap[]

Verlinkung des gesamten Bildes[]

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

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

Ergebnis: <imagemap> Image:Beispielgrafik-Strom-Gas.png|300px|Titel default Gehe zur Hauptseite </imagemap>

Verlinkung einzelnder Bildbereiche mit ImageMap[]

Mit ImageMap können Sie von verschiedenen Bildbereichen 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 (Eckige Klammer doppelt) und zu externen Seiten (Eckige Klammer einfach) 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

Wie Sie die Pixelkoordinaten erhalten, erfahren Sie hier. Oder Sie gehen gleich zum Online ImageMap Editor.

Weitere Hinweise finden Sie unter:
Wiki auf deutsch: http://wikis.zum.de/zum/Hilfe:ImageMap
Wiki auf englisch: https://www.mediawiki.org/wiki/Extension:ImageMap

@@ Zeile 1: / Zeile 1: @@
-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.
+Eine Grafik kann auch mit einem Link gesetzt werden. Entweder können Sie in der einfachen Variante das '''gesamte Bild''' mit internen oder externen Webseiten verlinken.
+Oder Sie können in der komplexen Variante '''Teilbereiche des Bildes''' mit Links unterlegen. Solche ([https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken verweissensitive Grafiken] lassen sich mit dem Tag <code><imagemap> ... </imagemap></code> erstellen.
 ===Gesamtbildverlinkung auf interne Seite===
-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.
+Möchten Sie ein ganzes Bild mit einer LOOP-Seite verlinken, nutzen Sie die unten angezeigte Wiki-Syntax. Mit dem Attribut <tt>Quickinfo</tt> ist der Text gemeint, der erscheint, sobald man mit dem Mauszeiger über das Bild fährt.
-<loop_area type="example">
+'''Syntax:'''<br \>
-'''Code:'''<br \>
+<code>[[Datei:Beispielgrafik-Strom-Gas.png|300px|
-<code>[[Datei:Metabild.png|300px|Quickinfo|link=LOOP-Tutorial]]</code>
+Quickinfo LOOP-Tutorial|link=LOOP-Tutorial]]</code>
 '''Ergebnis:'''<br \>
-[[Datei:Metabild.png|300px|Quickinfo|link=LOOP-Tutorial]]
+[[Datei:Beispielgrafik-Strom-Gas.png|300px|
-</loop_area>
+Quickinfo LOOP-Tutorial|link=LOOP-Tutorial]]
 ===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.
+Möchten Sie ein Bild mit einer externen Internetseite verlinken, setzen Sie den Link mit einer validen Internetadresse (<tt>http://</tt> bzw. <tt>https://</tt>). In unteren Beispiel führt Sie der Link im Bild auf die Webseite von Google (http://www.google.de).
-<loop_area type="example">
+'''Syntax:'''<br \>
-'''Code:'''<br \>
+<code>[[Datei:Beispielgrafik-Strom-Gas.png|300px|
-<code>[[Datei:Metabild.png|300px|Quickinfo|link=https://www.google.de]]</code>
+Quickinfo Google|link=https://www.google.de]]</code>
 '''Ergebnis:'''<br \>
-[[Datei:Metabild.png|300px|Quickinfo|link=https://www.google.de]]
+[[Datei:Beispielgrafik-Strom-Gas.png|300px|
-</loop_area>
+Quickinfo Google|link=https://www.google.de]]
-===Bildverlinkung mit einer angepasster ImageMap===
+===Bildverlinkung mit ImageMap===
+====Verlinkung des gesamten Bildes ====
+Bei der einfachen Nutzung von ImageMap fungiert das gesamte Bild als Verlinkungsnetz.
-====Einfache Variante der ImageMap====
+'''Syntax:'''
-Bei der einfachen Nutzung einer ImageMap fungiert das gesamte Bild als Verlinkungsnetz.
-'''Code:'''
 <code><imagemap>
-Image:Metabild.png|300px|Titel
+Image:Beispielgrafik-Strom-Gas.png|300px|Titel
 default [[LOOP-Tutorial|Gehe zur Hauptseite]]
 </imagemap></code>
@@ Zeile 38: / Zeile 38: @@
 '''Ergebnis:'''
 <imagemap>
-Image:Metabild.png|300px|Titel
+Image:Beispielgrafik-Strom-Gas.png|300px|Titel
 default [[LOOP-Tutorial|Gehe zur Hauptseite]]
 </imagemap>
-====Komplexe Variante der ImageMap====
+====Verlinkung einzelnder Bildbereiche mit ImageMap====
-Komplexe Variante = ImageMap für definierten Bereich der Verlinkung im Bild:
+Mit ImageMap können Sie von verschiedenen Bildbereichen 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:''' <code>poly x1 y1 x2 y2 x3 y3 x4 y4 ... [[Quickinfo|Link]]</code>
+* '''Rechteck:''' <code>rect x1 y1 x2 y2 [[Quickinfo|Link]] </code>
+* '''Kreis:''' <code>circle x y r [[Quickinfo|Link]]</code>
+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.
+<loop_area type="important">
+Die Art der Verlinkung zu internen LOOP-Seiten (Eckige Klammer '''doppelt''') und zu externen Seiten (Eckige Klammer '''einfach''') unterscheidet sich von einander!
-'''Code:'''
+* intern Verl. <nowiki>[[Link|Quickinfo]]</nowiki>
+* extern Verl. <nowiki>[Link Quickinfo]</nowiki>
+</loop_area>
+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:'''
 <code><imagemap>
 Image:Testbild_IM.png|450px|Titel
-default [[LOOP-Tutorial|Gehe zur Hauptseite]]
+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></code>
@@ Zeile 58: / Zeile 84: @@
 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]]
+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]]
+rect 140 204 230 343 [https://de.wikipedia.org/wiki/Rechteck Rechteck]
 </imagemap>
-<nowiki>
+<loop_area type="notice">
-poly 130 45 210 45 210 110 125 110 [[Quickinfo|Link]] \**x1 y1 x2 y2 x3 y3 x4 y4
+Wie Sie die Pixelkoordinaten erhalten, erfahren Sie [https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken#Wie_erhalte_ich_die_Pixelkoordinaten.3F hier]. Oder Sie gehen gleich zum [http://www.maschek.hu/imagemap/imgmap Online ImageMap Editor]. <br \><br \>
+'''Weitere Hinweise finden Sie unter:'''<br \>
-rect 52 55 205 210 [[Quickinfo|Link]] \**x1 y1 x2 y2
+Wiki auf deutsch: http://wikis.zum.de/zum/Hilfe:ImageMap<br \>
+Wiki auf englisch: https://www.mediawiki.org/wiki/Extension:ImageMap</loop_area>
-circle 52 55 30 [[Quickinfo|Link]] \**x y r
-<nowiki>
-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