aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de

Eine Grafik kann im ZUM-Wiki jetzt auch mit ImageMap versehen werden. Dies bedeutet, dass eine Grafik Links auf andere Seiten enthalten kann. Aus einer Beschreibung von PaintShopPro:

Diese Bereiche können kreisförmig, rechteckig oder unregelmäßig geformt sein. Wenn der Benutzer den Mauszeiger über den Bereich bewegt, verwandelt dieser sich in eine Hand. Wenn Sie dann auf diesen Bereich klicken, wird eine andere Webseite aufgerufen. Verweissensitive Grafik, Wikipedia – Die freie Enzyklopädie, 11.10.2007 - Der Text ist unter der Lizenz „Creative Commons Attribution/Share Alike“ verfügbar; zusätzliche Bedingungen können anwendbar sein. Siehe die Nutzungsbedingungen für Einzelheiten. In der Wikipedia ist eine Liste der Autoren verfügbar.

Inhaltsverzeichnis 1 Beispiel 2 Editor 3 Ganzes Bild 4 Zu einer externen Seite verlinken 5 Siehe auch

Beispiel

Man fahre einmal mit dem Cursor über die folgende Grafik und man sieht dann die entsprechenden Links auf Monitor, Tastatur, Kopf, Gedanken.

Das schreibt man:

<imagemap>
Bild:Foo.jpg|200px|Skizze 
poly 131 45 213 41 210 110 127 109 [[Monitor]]
poly 104 126 105 171 269 162 267 124 [[Tastatur]]
rect 15 95 94 176   [[Kopf]]
# A comment, this line is ignored
circle 57 57 20    [[Gedanken]]
desc bottom-left
</imagemap>

Das bedeutet, dass über die Bildkoordinaten 131 45 213 41 210 110 127 109 (dabei sind die Koordinaten vom linken oberen Rand: 131 nach rechts, 45 nach unten, 213 nach rechts, 41 nach unten, ...) ein Polygonzug gelegt wurde, innerhalb dieses Polygons erscheint unterhalb des Cursors der Hinweis Monitor. Dies ist dann auch ein Link auf die (nicht existierende) Seite Monitor.

Im Bild werden diese Bereiche angezeigt.

Der Befehl wird auf der Seite http://www.mediawiki.org/wiki/Extension:ImageMap genauer erläutert.

Editor

Imagemap-Editor (Peter Schlömer)

Hier kann man einen Link zu einem schon vorhandenen Bild eingeben. Z.B. http://wiki.zum.de/images/0/06/Foo.jpg (obiges Bild).

HILFE:

Diese Adresse des Bildes erhält man, indem man auf das Bild in der Einzelanzeige des Bildes klickt und diesen Link kopiert!

Ist die URL eingegeben, auf Laden klicken, dann kann z.B. ein neuer Bereich als Rechteck markiert werden, hier über den Monitor mit den Koordinaten 127,41 und 212,110, wie vermerkt jeweils mit der linken bzw. rechten Maustaste im Bild angeklickt.

Zusätzlich wird das "i" an der ausgewählten Stelle eingefügt und es werden die bisher eingegebenen Daten angezeigt.

Ergänzt um einen Kreis für die "Gedanken" und um Link und Titel, erscheint dann der ImageMap-Code:

der dann, noch verändert aus Image:|Originalbild zu Bild:Foo.jpg|Originalbild folgendes Bild ergibt:

Ganzes Bild

Das schreibt man:

<imagemap>
File:Foo.svg|200px|Originalbild

rect 0 0 300 300 [[Hilfe:ImageMap/Linkseite|Link von einem Bild!]]
# Ganzes Bild

desc none
</imagemap>

Damit ist es möglich ein Bild anzuzeigen und direkt von dem Bild einen Link zu einer Seite zu setzen.

Beachte:

1. das Rechteck rect geht über die ganze Bildfläche
2. die rechte untere Ecke geht über die Größe der Bildfläche hinaus. Muss nur groß genug sein.
3. durch desc none wird der Button Information zu dem Bild nicht angezeigt.

Zu einer externen Seite verlinken

Das schreibt man:

<imagemap>
Datei:Zumunitylogo.gif

rect 0 0 300 3000 [http://unity.zum.de/ ZUM-Unity]
# Ganzes Bild

desc none
</imagemap>

Siehe auch

• Hilfe:ImageLink