3.11.1.4 Abbildungen zu einer Image Map erweitern

[unmarkierte Version][unmarkierte Version]
Zeile 56: Zeile 56:
Image:Testbild_IM.png|450px|Titel
Image:Testbild_IM.png|450px|Titel


circle 105 115 45 [https://de.wikipedia.org/wiki/Kreis|Kreis]
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]]

Version vom 3. Februar 2016, 11:46 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.

Beispiel

Code:

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

Ergebnis:

Quickinfo


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.

Beispiel

Code:

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

Ergebnis:

Quickinfo

Bildverlinkung mit einer angepasster ImageMap[]

Einfache Variante der ImageMap[]

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

Code: <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[]

Komplexe Variante = ImageMap für definierten Bereich der Verlinkung im Bild:

Code: <imagemap> Image:Testbild_IM.png|450px|Titel default [[LOOP-Tutorial|Gehe zur Hauptseite]] </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 [[1]]

rect 140 204 230 343 [[2]] </imagemap>


<nowiki> poly 130 45 210 45 210 110 125 110 Link \**x1 y1 x2 y2 x3 y3 x4 y4

rect 52 55 205 210 Link \**x1 y1 x2 y2

circle 52 55 30 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