Imagemaps sind hervorragend geeignet, wenn du Inhalte grafisch aufbereiten und dem Nutzer gleichzeitig die Möglichkeit bieten willst, durch den Klick auf ein grafisches Element zu einem bestimmten Inhalt zu springen. Im Grunde genommen funktioniert das wie ein Inhaltsverzeichnis.
Durch den Klick auf eines in der Imagemap definierten Elemente gelangt der Besucher deiner Webseite direkt zu der gesuchten Stelle im Dokument. Für lange Dokumente ist das eine nützliche Sache. Aber natürlich kannst du eine Imagemap auch dazu verwenden zu anderen Seiten innerhalb deiner WordPress-Website zu springen oder sogar auf Seiten völlig fremder Webanbieter.
Im weiteren Verlauf dieser Anleitung werde ich genau die Imagemap erstellen, die du hier drunter siehst. Das geht ganz ohne Plugin und erfordert auch keine besonderen Programmierkenntnisse. Lediglich mit einem Grafikprogramm solltest du umgehen können. Ich verwende hier im Beispiel Gimp. Andere Programme können aber auch genutzt werden.
Beispiel Imagemap:
Für das Beispiel habe ich eine Grafikdatei im JPG-Format ausgewählt. Im Grunde genommen ist es eine Collage aus 9 Einzelfotos, die dann als eine einzige Datei abgespeichert wurde. Erstellt habe ich diese Collage mit dem Faststone Image Viewer.
Jedes der neun Felder der Imagemap verlinkt auf einen eigenen Artikel auf der Webseite Amazing Temples. Wenn man mit dem Mauszeiger über eines der Bilder fährt ändert sich das Foto und ein dem klickbaren Bereich entsprechender Filter wird über das Foto gelegt. Bei den Fotos handelt es sich um markante Gebäude aus verschiedenen Mayastädten in Mexiko. Bewegt man den Mauszeiger über das Bild, dann erscheint im „Tooltip“ der Name der Stadt. Ein Klick auf einen der Bereiche öffnet dann den korrespondierenden Artikel in einem neuen Browsertab.
Was man für die Imagemap braucht
Zunächst benötigt man natürlich eine Grafik oder ein Foto welches der Imagemap zugrunde gelegt wird. Das ist es, was der Besucher deiner Webseite zu sehen bekommt.
Danach erstellt man eine Art unsichtbare Maske oder Schablone, die über das Foto gelegt wird. Hier werden die Bereiche festgelegt, auf die ein Benutzer klicken kann. Auch die Form und Größe des jeweiligen Bereichs werden hier bestimmt. Und man definiert das Sprungziel also den Link, auf den der Bereich der Imagemap verweisen soll.
Bezüglich der Form der klickbaren Bereiche, will ich an dieser Stelle schon einmal erwähnen, dass es möglich ist runde, aber auch rechteckige Formen zu definieren. Ebenfalls ist es möglich unregelmäßige, also vieleckige oder polygone Formen für die klickbaren Bereiche festzulegen.
Grafik oder Foto als Grundlage der Imagemap
Zunächst benötigst du also die Grafik oder das Foto, das die Basis deiner Imagemap werden soll. Wenn du dich entschieden oder selber eins erstellt hast, solltest du das Bildmaterial in eine für deine Zwecke sinnvolle Größe bringen. Für das Beispiel mit den Ruinenstädten habe ich mich für eine Größe von 591×591 px entschieden. Falls deine Imagemap aber formatfüllend auf einem Desktopmonitor dargestellt werden soll, empfiehlt es sich eher eine Auflösung von 1920x1080px zu verwenden.
Dein Bildmaterial kannst du dann wie gewohnt als jpg-Datei abspeichern.
Also nächstes musst du ausmessen, wo später die klickbaren Bereiche liegen sollen. Öffne deine Grafikdatei also mit Hilfe der Grafiksoftware deiner Wahl. Ich selber verwende als Bildbearbeitungssoftware Gimp und werde mich deshalb im folgenden darauf beziehen. Mit anderen Programmen sollte das aber genauso möglich sein.
Formen ausmessen
Keine Angst du musst kein Rechenkünstler sein, um die benötigten Werte zu erhalten.
In Gimp verwendet man am einfachsten das Verschiebewerkzeug und fährt mit dem Fadenkreuz zu den Stellen, die man vermesssen will. Während man hin und her fährt, wird im unteren Bereich des Gimp-Bildschirm jeweils die genau Position des Fadenkreuzes in Form von X:Y Koordinaten angezeigt. Beachte, dass der Ursprung des Koordinatenkreuzes oben links ist. Die X-Wert verlaufen, wie man das in der Schule gelernt hat von dort ausgehend nach rechts, die Y-Werte verlaufen nach unten. Die Werte sind hier allerdings positiv.
Hört sich kompliziert an, ist es aber nicht.
Die Werte, die dir dein Grafikprogramm anzeigt, notierst du dir am einfachsten auf ein Stück Papier. Für rechteckige Bereiche benötigst du die linke obere Ecke und die rechte untere Ecke des Rechtecks. Die erhältst auf diese Art Zahlenpaare.
Beispiel:
Obere linke Ecke: 200,200 – das wir dab jetzt also XWert1=200 und YWert1=200 bezeichnet.
Untere rechte Ecke 300,300 – das wird ab jetzt als XWert2=300 und YWert2=300 bezeichnet
Jetzt ein wenig rechnen.
Rechteckige Bereiche
Für einen rechteckigen Bereich benötigst du vier Werte X, Y, Width und Height. Width ist die Breite und Height ist die Höhe.
X=XWert1
Y=YWert1
Width=XWert2 minus XWert1
Height=YWert2 minus YWert1
Also, für meine Beispielzahlen:
X=200
Y=200
With=300-200=100
Height=300-200=100
Mit anderen Worten: x=“200″ y=“200″ width=“100″ height=“100″
Alles easy oder?
So musst du jetzt für jeden klickbaren Bereich vorgehen. Hier siehst du die Zahlen, wie ich sie für die Imagemap im Beispiel ermittelt habe.
| XWert1 | YWert1 | XWert2 | YWert2 | x | y | width | height | |
| 8 | 10 | 186 | 186 | 8 | 10 | 178 | 176 | Tikal |
| 8 | 204 | 186 | 384 | 8 | 204 | 178 | 180 | Ek Balam |
| 8 | 405 | 186 | 580 | 8 | 405 | 178 | 175 | Edzna |
| 203 | 10 | 388 | 186 | 203 | 10 | 185 | 176 | Palenque |
| 203 | 204 | 388 | 384 | 203 | 204 | 185 | 180 | Olmeken |
| 203 | 405 | 388 | 580 | 203 | 405 | 185 | 175 | Tonina |
| 403 | 10 | 583 | 186 | 403 | 10 | 180 | 176 | Uxmal |
| 403 | 204 | 583 | 384 | 403 | 204 | 180 | 180 | Tulum |
| 403 | 405 | 583 | 580 | 403 | 405 | 180 | 175 | Yaxha |
Runde Bereiche
Für einen runden Bereich brauchst du den Mittelpunkt und den Radius des Kreises.
Auch dazu musst du ein wenig rechnen. Du misst dazu ungefähr rechts am Kreis den X-Wert, als die Horizontale und ziehst davon den X-Wert des Mittelpunktes ab. So erhältst du den Radius des Kreises.
Polygone Bereiche
Auch unregelmäßige Formen oder Dreiecke sind als Formen für die klickbaren Bereiche möglich. Dazu musst du alle X-Y-Werte-Paare ermitteln.
Wie man das dann implementiert steht weiter unten.
URL zur Mediendatei
Zunächst aber solltest du deine Grafikdatei in die Medienbibliothek deiner WordPress-Seite hochladen. Jetzt brauchst du noch die URL deiner Mediendatei. Dazu öffnest du die Medienbibliothek und klickst bei deiner gerade hochgeladenen Grafikdatei auf „bearbeiten“. In dem Fenster, das sich jetzt öffnet findest den den Speicherort der Grafikdatei im oberen rechten Bereich unter „Datei-URL“. Diesen Wert musst du dir später kopieren.
Imagemap implementieren als HTML-Block im WordPress Blockeditor
Jetzt implementieren wir die Imagemap und fügen sie in ein Dokument ein.
Dazu benötigst du einen neuen Block vom Typ „HTML“. Eingehegt wird das ganze vom Figure-Tag.
Als erstes musst du die Dimension der Imagemap eintragen. Bei mir überdeckt sie das gesamte Bild dementsprechend habe ich für die viewBox-Werte folgenden Eintrag. Sie reicht von von den Koordinaten (x,y) = 0, 0 in der linken oberen Ecke bis 1024, 768 rechts unten.
<svg viewBox="0 0 591 591" >Als nächstes folgt die eigentliche Grafikdatei. Sie wird in <image>-Tags eingeschlossen. Auch hier musst die Pixelzahlen der Grafikdatei eintragen. Und du fügst den Link zur eigentlichen Grafikdatei hinzu – den hast du dir ja weiter oben schon herausgesucht. Bei mir steht da dann:
<image width="591" height="591" href="https://goldpilz.de/wp-content/uploads/2020/07/ContactSheet_001.jpg"></image>Die klickbaren Bereiche hinzufügen:
Für einen rechteckigen Bereich sieht der Eintrag folgendermaßen aus. Außen findet sich ein <a>-Tag mit dem Link zu dem hinverwiesen werden soll, innen ein <rect>-Tag, das die spezifischen Werte enthält. Also so:
<a href="Link wo du hin willst"><rect x=xy y=xy width=xy height=xy></rect></a>und konkret mit korrekten Werten eingetragen dann so:
<a href="https://amazingtemples.com/de/mayastaetten/guatemala-de/tikal-2/"><rect x="8" y="10" width="190" height="186"></rect></a>Willst du einen kreisförmigen Bereich definieren, dann sieht das so aus:
<a href="Link wo du hin willst"><circle cx="760" cy="250" r="145" /></a>Die Werte cx und cy bezeichnen den Mittelpunkt des Kreises, der r-Wert enthält den Radius des Kreises. Die Variable href enthält den Link zu der URL, die durch den Klick auf den Bereich angesprungen werden soll.
Für einen polygonen Bereich gehst du so vor:
<a href="https://goldpilz.de/"><polygon points="100,10 150,190 50,190" /></a>Beachte, dass du hier auch Sprungmarken bzw. Anker verwenden kannst. Dann führt der Link zu einer vorher definierten Stelle im selben Dokument. Wie man das macht findest du in meinem Beitrag: Sprungmarken in WordPress – einfach ein Inhaltsverzeichnis erstellen
Die klickbaren Bereiche sind natürlich unsichtbar. Mit einem Trick kannst du sie aber zumindest vorrübergehend sichtbar machen. Damit kannst du ihre Position und Ausdehnung besser kontrollieren und sehen, ob du bei Abmessen der Bereiche alles richtig gemacht hast.
Dazu fügst du einfach folgende Parameter hinzu: fill=“#fff“ opacity=“0.5″. Wenn du später die Bereiche wieder unsichtbar machen willst, kannst du ganz einfach den Wert für „Opacity“ auf 0 setzen.
Hier jetzt der Code für klickbare Bereiche in der Grafik. Beachte, dass der dritte Bereich, ein kreisförmiger seinen Mittelpunkt genau an der linken unteren Ecke hat. Der klickbare Bereich, ist allerdings nur innerhalb der Grenzen der Grafik aktiv.
Beispiel mit verschiedenen geometrischen Formen
<figure>
<svg viewBox="0 0 1024 768" >
<image width="1024" height="768" href="https://goldpilz.de/wp-content/uploads/2020/07/image-map.jpg"></image>
<a href="#erster_schritt">
<circle cx="760" cy="250" r="145" fill="#fff" opacity="0.5" />
</circle>
</a>
<a href="#zweiter_schritt">
<rect x="100" y="100" width="250" height="200" fill="#fff" opacity="0.5">
</rect>
</a>
<a href="https://goldpilz.de/block-bibliothek-gutenberg-tutorial/"><circle cx="0" cy="768" r="150" fill="#fff" opacity="0.5" />
</svg>
</figure>Tooltips einfügen
Tooltips sind kurze Texte, die aufpoppen, wenn man mit der Maus über einen klickbaren Bereich fährt. Um so etwas zu implementieren musst du innerhalb der geometrischen Definition ein <title>-Tag definieren. So wie hier:
<a href="https://amazingtemples.com/de/mayastaetten/guatemala-de/tikal-2/" target="_blank">
<rect x="8" y="10" width="190" height="186" fill="#fff" opacity="0">
<title>Tikal</title>
</rect>
</a>Änderung der Anzeige beim drüberfahren mit der Maus
Wenn du willst, dass der sich der klickbare Bereich beim Überfahren mit der Maus optisch ändert, dann kannst du zwischen den <svg>-Tags noch einen weiteren Bereich einfügen, der dieses Verhalten implementiert.
<svg viewBox="0 0 591 591">
<defs>
<style>
rect:hover {
fill: white;
opacity:0.5;
}
</style>
</defs> Der hier hinzugefügte <style>-Code überdeckt den klickbaren Bereich mit einer teilweise durchsichtigen Maske, wenn man mit dem Mauszeiger darüber fährt.
Imagemaps auf mobilen Anzeigen
Mobile Bildschirme von Telefonen oder Tablets haben nun mal leider keinen Mauszeiger. Deshalb solltest du unter der Imagemap auf jeden Fall einen Hinweis anbringen, dass man durch das klciken auf die Grafik zu anderen Inhalten gelangt.
Der komplette Code der Imagemap vom Anfang dieser Seite
Hier jetzt der komplette Code, der die Imagemap mit den Maya-Tempeln vom Anfang dieser Seite definiert. Du kannst ihn dir gerne kopieren und dann an deine eigenen Bedürfnisse anpassen.
<figure id="map">
<svg viewBox="0 0 591 591">
<defs>
<style>
rect:hover {
fill: white;
opacity:0.5;
}
</style>
</defs>
<image width="591" height="591" xlink:href="https://goldpilz.de/wp-content/uploads/2020/07/ContactSheet_001.jpg"></image>
<a href="https://amazingtemples.com/de/mayastaetten/guatemala-de/tikal-2/" target="_blank"><rect x="8" y="10" width="190" height="186" fill="#fff" opacity="0"><title>Tikal</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/palenque-de/" target="_blank"><rect x="203" y="10" width="190" height="186" fill="#fff" opacity="0"><title>Palenque</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/yucatan-de/uxmal-erbaut-in-einer-nacht/" target="_blank"><rect x="403" y="10" width="190" height="186" fill="#fff" opacity="0"><title>Uxmal</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/ek-balam-der-schwarze-jaguar/" target="_blank"><rect x="8" y="204" width="190" height="186" fill="#fff" opacity="0" ><title>Ek Balam</title></rect></a></circle></a>
<a href="https://amazingtemples.com/de/mexiko-de/tabasco-de/die-olmeken-la-venta-park-museum-in-villahermosa/" target="_blank"><rect x="203" y="204" width="190" height="186" fill="#fff" opacity="0" ><title>La Venta</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/tulum-turkisfarbenes-meer-und-tempelruinen-an-der-riviera-maya/" target="_blank"><rect x="403" y="204" width="190" height="186" fill="#fff" opacity="0"><title>Tulum</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/edzna-das-haus-der-itza/" target="_blank"><rect x="8" y="405" width="190" height="186" fill="#fff" opacity="0" ><title>Edzna</title></rect></a>
<a href="https://amazingtemples.com/de/mexiko-de/tonina-im-tal-von-ocosingo/" target="_blank"><rect x="203" y="404" width="190" height="186" fill="#fff" opacity="0" ><title>Tonina</title></rect></a>
<a href="https://amazingtemples.com/de/mayastaetten/guatemala-de/yaxha-maya-peten-de/" target="_blank"><rect x="403" y="404" width="190" height="186" fill="#fff" opacity="0" ><title>Yaxha</title></rect></a>
</svg>
</figure>