ZUM-Unterrichten - Logo.png
Viele Inhalte sind umgezogen ins neue ZUM-Unterrichten.

Hilfe:ImageMap

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche
ZUM-Logo.png
Seiten bearbeiten:
Erweiterungen
... mehr

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.

W-Logo.gif 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

Beispiel

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

MonitorTastaturKopfGedankenSkizze
Über dieses Bild
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 Foo2.png 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:

Imagelink02.jpg

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.

Foo3.png

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

Foo4.png

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

Foo5.png

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

Was es zu sehen gibt!Gedanken sind frei!Originalbild
Über dieses Bild

Ganzes Bild

Link von einem Bild!Originalbild
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

ZUM-UnityZumunitylogo.gif
Das schreibt man
<imagemap>
Datei:Zumunitylogo.gif

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

desc none
</imagemap>

Ergänzung:

Das Einbinden eines Links zu einer (externen) Seite, statt zur Bildinformation, geht inzwischen auch einfacher über die Syntax von Bildern mit dem Zusatz verweis=, dahinter der Link (ohne Anführungszeichen). Diese neue Möglichkeit erspart die Angabe von Koordinaten.

GoogleMaps 3.png

Das schreibt man
[[Datei:GoogleMaps_3.png|verweis=http://maps.google.com]]

oder für das obige ZUM-Unity Bild:

Zumunitylogo.gif

Das schreibt man
[[Datei:Zumunitylogo.gif|verweis=http://unity.zum.de]]

Siehe auch