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
kamera-pflanze
Lösung für Photoshop JPEG Marker Fehlermeldung
wordpress-svg-mac-bildbearbeitung
WordPress SVG Upload – SVG für Mediathek erlauben

Ähnliche Beiträge

2 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

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ü