Image Maps sind Grafiken, bei denen mehrere Links zu anderen Bereichen einer Website hinterlegt sind. Ein Beispiel für die Anwendung einer Image Map könnte eine Landkarte sein. Die verschiedenen Länder sind dann jeweils mit einem Link hinterlegt. Die Nutzer können nun mit einem Klick auf ein spezielles Land zur entsprechenden Sektion wechseln. Natürlich gibt es viele weitere Anwendungsbeispiele.
So sieht das aus : → Imagemap Beispiel
ImageMap erstellen (Koordinaten erhalten)
Doch wie erstellt man eine solche Image Map nun? Mit einem Grafikbearbeitungsprogramm wie z.B. GIMP lässt sich dies bewerkstelligen.
In diesem Abschnitt lernen Sie, wie Sie die Koordinaten erhalten, die Sie für den Eintrag in WordPress benötigen.
Eine Möglichkeit ,Image Maps zu erstellen ist der Online-Editor "image-map.net". Zum Erstellen einer neuen Image Map laden Sie ein Bild hoch oder geben Sie eine Quelle (URL) zu einem Bild an.
Im unteren Bereich erzeugen Sie Vierecke (Rect) , Vielecke (Poly) und Kreise (Circle) in beliebiger Anzahl. Jeder der Bereiche kann angeklickt werden und landet auf einer beliebigen Internetseite.
Schauen Sie sich den erzeugten Code der Image Map an per Klick auf Show Me the Code .
Beispiel: Code aus imagemap.net ( mit einem anklickbaren Viereck, einem Vieleck (poly) und einem Kreis):
<!-- Image Map Generated by https://www.image-map.net/ --> <img src="imagemap-samplefile-1024x538.png" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" /> </map>
Video zur Erzeugung der Image Map des obigen Beispiels:
GIMP bringt die erforderliche Funktionalität bereits von Haus aus mit. GIMP wird unter der GNU-Lizenz vertrieben und kann unter https://www.gimp.org/ kostenlos heruntergeladen werden. Beachten Sie auch die Möglichkeit, GIMP via ZDV-Apps zu installieren: https://apps.zdv.uni-mainz.de.
Schritt 1: Grafik für die Image Map auswählen und konvertieren:
Als erstes öffnen Sie mit GIMP die Grafik, für die Sie in eine Image Map herstellen wollen. Sobald die Grafik geöffnet ist, wählen Sie im Hauptmenü von GIMP das Menü Filter aus. Gehen Sie anschließend unter der Kategorie Web auf den Menüeintrag Imagemap. Nun öffnet GIMP ein weiteres Fenster, in dem Sie die Image Map erstellen.
Schritt 2: Image Map erzeugen und Links einfügen:
Sobald sich das neue Fenster geöffnet hat, beginnen Sie mit dem Erstellen der Image Map. Dazu bietet Ihnen GIMP in der linken Navigationsleiste Selektionswerkzeuge für rechteckige, kreisförmige und vieleckige Anklickbereiche.
Schritt 3: Image Map in Webseite einbinden:
Wenn Sie die Image Map erstellt haben, speichern Sie diese mit GIMP ab. GIMP erstellt dabei eine Datei mit der Endung .map
. Diese Datei können Sie nun öffnen. Unter Windows können Sie dafür z.B. den Editor (notepad.exe) verwenden. Der Inhalt der Datei liefert Ihnen die Koordinaten für Ihre Imagemap, die Sie für die Einbettung in WordPress benötigen.
Beispiel: Code aus Gimp (.map-Datei):
<area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" />
(Quelle: "BEFORE AFTER GRANDMA" https://www.naolito.com, 2019)
ImageMap in WordPress-Seite einbinden
Das Shortcode-Plugin JGU-ImageMap erzeugt anklickbare Bereiche über einem Bild.
- Erstellen Sie eine ImageMap (wie oben erklärt) um die Koordinaten der anklickbaren Bereiche zu erhalten.
- Laden Sie Ihr Bild nun am besten in WordPress hoch.
Verwenden Sie nun diese Bild-URL sowie die Koordinaten wie folgt folgenden allgemeinen Shortcode-Muster:
[jgu_imagemap src="Bild-URL"] [jgu_imagemap_item shape="[rect|poly|circle]" coords="Die Koordinaten z.B. 142,31,501,272" url="target-URL" background_color="#fff" stroke_color="#000" stroke_width="3" title="text"] [/jgu_imagemap]
Das bedeutet, dass Sie die oben schon im Beispiel aufgeführten Zeilen wie folgt einsetzen:
Beispiel: Code aus Gimp
<area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" />
Beispiel: Gimp-Code-Koordinaten in den Shortcode eingefügt:
Parameter für jgu_imagemap
Parameter | Beschreibung |
---|---|
src | Bild Quelle / URL |
Parameter für jgu_imagemap_item
Parameter | Beschreibung |
---|---|
shape | Form Typen (circle,poly,path), die anklickbar werden |
coords | Das Attribut coords wird zusammen mit dem Attribut shape verwendet, um die Größe, Form und Platzierung eines Links in einem Objekt oder img-Element anzugeben. Die Koordinaten der linken oberen Ecke sind 0,0. |
x1,y1,x2,y2 | Wenn das Shape-Attribut auf "rect" festgelegt ist, werden die Koordinaten der linken oberen Ecke und der rechten unteren Ecke des Rechtecks angegeben. |
x,y,radius | Wenn das Formattribut auf "Kreis" gesetzt ist, werden die Koordinaten des Kreismittelpunkts und des Radius angegeben. |
x1,y1,x2,y2,..,xn,yn | Wenn das Shape-Attribut auf "poly" festgelegt ist, werden die Koordinaten der Kanten des Polygons angegeben. Wenn das erste und das letzte Koordinatenpaar nicht identisch sind, muss der Browser das letzte Koordinatenpaar hinzufügen, um das Polygon zu schließen. |
url | URL auf eine beliebige Ressource. Ist dieses Feld nicht mit einer Webadresse ausgefüllt, wird auch der title nicht angezeigt! |
title | Da die URLs nur per Koordinaten gekennzeichnet sind, ist der Title für die Anzeige in Screenreadern relevant. |
background_color | Form Hintergrund Grundfarbe (Hexadezimaler Code #fffff = weiß) |
stroke_color | Formrahmenfarbe (Hexadezimaler Code #000000 = schwarz) |
stroke_width | Form-Rahmenbreite |
debug | Aktivieren Sie die Debug-Ausgabe |
Beispiel zum Einfügen in Ihre Webseite:
[jgu_imagemap src="//www.blogs.uni-mainz.de/wp-content/uploads/2019/05/imagemap-samplefile.png"] [jgu_imagemap_item shape="rect" coords="142,31,501,272" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#555" stroke_width="1" title="Google"] [jgu_imagemap_item shape="circle" coords="910,195,217" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#fff" stroke_width="10" title="Text"] [jgu_imagemap_item shape="poly" coords="89,408,337,365,575,431,478,619,81,593" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#000" stroke_width="3" title="Text"] [/jgu_imagemap]
Leere Vorlage zum Einfügen in Ihre Webseite:
[jgu_imagemap src="Dateipfad der Bilddatei"] [jgu_imagemap_item shape="rect" coords="" url=""] [jgu_imagemap_item shape="circle" coords="" url=""] [jgu_imagemap_item shape="poly" coords="8" url="" background_color="#fff" stroke_color="#000" stroke_width="3" title="Text"] [/jgu_imagemap]