Bild auf image-map.net hochladen und Bereiche verlinken
Du möchtest bestimmte Bereiche eines Bildes, z.B. dein Logo auf einem Foto, mit einem Link versehen? Das lässt sich über eine HTML Image Map realisieren. Damit wir keinen Code schreiben müssen, benutzen wir einfach das Online-Tool auf image-map.net.
Hier können wir das Bild von unserem PC hochladen oder direkt die URL zu unserem Bild angeben, wenn es sich schon auf unserer Webseite befindet. Ich bevorzuge letztere Methode.
Anschließend wird uns das Bild angezeigt und wir können unten für jeden Bereich eines Links vier Einstellungen vornehmen:
- Shape: Hier kannst du zwischen einem Rechteck, einem Polygon oder einem Kreis auswählen.
- Link: Hier gibst du die Ziel-URL ein.
- Title: Der Titel des Links der angezeigt wird, sobald sich der Mauszeiger in diesem Bereich befindet.
- Target: Wenn du möchtest, dass der Link sich in einem neuen Tab öffnet, dann wählst du hier „_blank“ aus.
Code für die HTML Image Map exportieren
Sobald alle Bereiche des Bildes mit dem passenden Linkbereich versehen wurden, können wir uns durch einen Klick auf „Show me the Code“ den entsprechenden HTML Code anzeigen lassen. Diesen kopieren wir uns und fügen ihn im nächsten Schritt auf unserer Website ein.
HTML Code in deine Website einfügen
Wenn du, wie viele andere auch, eine WordPress Website betreibst, dann musst du den kopierten Code in ein HTML- bzw. Text-Element einfügen. In der Desktop-Version wird das Bild mit den verlinkten Bereichen perfekt angezeigt, jedoch sind die verlinkten Bereiche auf mobilen Endgeräten verschoben. Dafür gibt es glücklicherweise ein kleines Plugin, dass Abhilfe schafft.
HTML Image Map responsiv machen
Damit der verlinkte Bildbereich auch auf Smartphones und Tablets mitskaliert, installieren wir das Plugin Responsive Image Maps. Falls ihr das Plugin über die Plugin-Suche im WordPress Backend eurer Seite nicht finden könnt, dann ladet es euch erst herunter und ladet es hoch. Nachdem das Plugin aktiviert wurde, funktioniert es sofort und es muss nichts weiter gemacht werden. Einstellungsmöglichkeiten gibt es nicht für dieses Plugin.
Wenn dir dieser Beitrag weitergeholfen hat, dann schreibe es gerne unten in die Kommentare und folge uns auch auf YouTube und Instagram für mehr hilfreichen Content. Vielen Dank! 🙂
Digitales High Five, dein Fortypixel Team.
18 Kommentare. Hinterlasse eine Antwort
Hi,
das Tool ist wirklich super. Ich würde gern die Farbe des Kreises anpassen, der erscheint, wenn man auf einen Bildbereich klickt. Aktuell ist dieser blau. Den Kreis hätte ich gern in unserem CI haben. Kann man das ändern? Wenn ja, Wie?
Viele Grüße
Kristin
Hallo Kristin,
um die Farbe des Rahmens anzupassen, der beim Klicken auf den Bildbereich entsteht, kannst du folgenden CSS-Code verwenden:
area {
outline-color: #ff0000;
}
…in diesem Fall wird die Rahmenfarbe rot. Viel Erfolg!
Hallo Zusammen,
Das Tool ist so an sich wirklich top!
Nur in meinem Fall erscheint anstatt dem Bild beim einfügen + bestätigen des Links nur ein blauer Kasten mit einem Fragezeichen auf meiner Website.
Ich wollte den Link auf der Jimdo Website nutzen. Habe es mehrere male versucht, aber es will nicht funktionieren.
Habt ihr eine Idee?
Vielen lieben Dank und liebe Grüsse,
Vivien
Hallo Vivien,
am besten schickst du einfach den Link der betroffenen Webseite. Dann können wir uns den Fehler im Quelltext mal anschauen.
Liebe Grüße
Hallo zusammen 🙂
Ich finde das Tool super. Aber leider funktioniert es nicht ganz bei meiner Website…
Das Bild erscheint zwar in der Homepage, der verlinkte Bereich erscheint jedoch nicht…
Könnt ihr mir da weiterhelfen?
Beste Grüsse
Bei mir ist das leider auch so. Beim Einfügen in der direkten Vorschau sieht man, dass man die Bilder anklicken könnte – bei der richtigen Vorschau dann allerdings und nach dem Speichern geht es nicht.
Hi! Mir ist klar, dass das hier nicht ganz dass Thema ist, aber ich muss einfach fragen: Ist der Betriewb einher gut etablierten Website wie der Ihren mit einem hohen Arbeitsaufwand verbunden?
Ich bin nicht erfahren im Betreiben eines Weblogs.
Ich würde gerne einen Blog eröffnen, daamit ich meine eigenen Erfahrungen und meine Kompetenzen online vermitteln kann.
Bitte sagen Sie mir, wenn Sie irgendwelche Inpouts oder Anregungen für neue,
aufstrebbende Blog-Besitzer haben. Ichh weiss das zu schätzen!
Super Anleitung, nur wurde das Plugin fuer responsive image maps seit 6 Jahren nicht mehr aktualisiert…. ?
https://de.wordpress.org/plugins/responsive-image-maps/
Hallo Daniela,
bei uns funktioniert das Plugin nach wie vor sehr gut 🙂
LG Abud
Hallo,
ich habe eine Frage hierzu: „… dann musst du den kopierten Code in ein HTML- bzw. Text-Element einfügen.“ Wo genau muss ich den Code denn hinkopieren? Auf die Seite, auf der das Bild platziert ist? Auf eine andere?
Vielen Dank für die Anleitung und eine Rückmeldung 🙂
Anika
Hallo Anika,
der Code muss auf die Seite wo auch dein Bild dann erscheinen soll.
Viele Grüße,
Abud
Hallo zusammen, vorab vielen Dank für das Tool. Gibt es auch Möglichkeiten, dass ganze außerhalb von WordPress Responsive darzustellen? Ohne Plugin klappt, allerdings lässt sich das Plugin ja nicht auf eine „stupide“ HTML-Seite basteln
Diese Anforderung hätte ich auch. Gibt es dazu evtl eine Lösung?
Hallo zusammen,
Weiß jemand wie ich die schwarzen Kästen die angezeigt werden wenn ich auf eine Feld klicke, wegbekomme?
LG,
Michelle
Hi! Super Anleitung! Danke dafür.
Kann man das ganze per html noch mit einem hoover-effekt versehen?
Hallo zusammen,
ich finde es auch super – aber wenn mit der Code angezeigt wird, habe ich keine Möglichkeit diesen zu kopieren..
Benutzen werde derzeit Websites X5 evo 20
Für einen Tipp wäre ich dankbar….
Hallo Dirk,
klicke einmal in das Feld und drücke dann STRG+A um den gesamten Code zu markieren. Danach STRG+C drücken um den Code zu kopieren.
Viel Erfolg!
Ihr Lieben, Euer Beitrag ist genial und das Video sehr leicht verständlich. Tausend Dank dafür und in meinem Kopf habe ich viele Ideen, wie ich das einsetzen kann. Der einzige Wermutstropfen: ich habe jetzt mehrere Bildformate ausprobiert, aber WordPress zeigt immer ein riesiges Bild, so dass ein Teil abgeschnitten ist. Im Augenblick habe ich das Format 1200 X 800
Gibt es dazu eine Lösung?