PluginsWebdesignWordPress

HTML Image Map – Mehrere Bildbereiche verlinken

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.
html-image-map-bild-upload

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.

image-map-code-anzeigen

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.

image-map-code-html-wordpress

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.

responsive-image-maps-wordpress-plugin
Lösung für Photoshop JPEG Marker Fehlermeldung
WordPress SVG Upload – SVG für Mediathek erlauben

Ähnliche Beiträge

11 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

    Antworten
    • 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!

      Antworten
  • 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

    Antworten
    • fortypixel
      1. April 2020 18:33

      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

      Antworten
  • Yannick Meister
    16. Mai 2020 19:10

    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

    Antworten
  • 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!

    Antworten
  • Super Anleitung, nur wurde das Plugin fuer responsive image maps seit 6 Jahren nicht mehr aktualisiert…. ?
    https://de.wordpress.org/plugins/responsive-image-maps/

    Antworten
  • 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

    Antworten
  • 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

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Menü