Mehrere Links auf einem Bild – so geht’s

Sie möchten ein Bild auf Ihre Website mit mehreren Verlinkungen einbauen? Wir erklären, wie es unkompliziert und ohne Grafikprogramm funktioniert.

Mit dem Imagemap Generator können Sie ohne HMTL-Kenntnisse ein Bild mit verschiedenen Links versehen

Einem Bild auf Ihrer Website sollen mehrere Links zugewiesen werden? Mit dem Imagemap Generator ist das kein Problem [Foto © Trueffelpix | fotolia.com]

Ein Bild mit mehreren Links kann sinnvoll sein, wenn man auf verschiedene Bereiche innerhalb der Website verweisen will, zum Beispiel bei mehreren Logos, Kartenabschnitten oder anderen Symbolen.

Um auf einem Bild mehrere Links zu setzen, müssen Sie sich nicht umständlich mit Grafikprogrammen abmühen. Das Online-Tool Easy Imagemap Generator* bietet eine einfache Möglichkeit, eine Image Map (Grafik mit mehreren Verlinkungen) zu erstellen.

Hier gibt es die Anleitung für den Easy Imagemap Generator:

Bild mit mehreren Links erstellen mit dem Easy Imagemap Generator

Anleitung: Mit dem Easy Imagemap Generator können Sie ein Bild mit mehreren Verlinkungen erstellen

Mit dem Online-Tool „Easy Imagemap Generator“ können Sie eine Grafik mit mehreren Links erstellen

Öffnen Sie das Online-Tool Imagemap Generator www.imagemap-generator.dariodomi.de. Laden Sie über den Button „Image Upload“ das Bild hoch, in das Sie mehrere Verlinkungen setzen möchten. Wenn Sie Ihre Grafik, die zur Image-Map werden soll, bereits in Ihr Redaktionssystem hochgeladen haben, können Sie von dort auch den Dateilink einfügen und das Bild so hochladen.

Beachten Sie dabei, dass:

  • die einzelnen Punkte auf der Grafik, die Sie verlinken möchten, klar abgegrenzt sind.
  • das Bild bereits die Größe hat, in der es auf Ihrer Website als Image-Map ausgegeben werden soll. Der Imagemap Generator zeigt das Bild in seiner Originalgröße an und skaliert es nicht automatisch zu.
  • das Bild in Ihrem Redaktionssystem muss in der Größe exakt mit der Grafik übereinstimmen, das Sie im Imagemap Generator bearbeiten.
  • Sie das im Redaktionssystem hochgeladene Bild nicht nachträglich umbennen oder verschieben dürfen. Ansonsten kann der Image-Map kein Bild mehr zugeordnet werden.
Der Imagemap Generator skaliert die Grafik nicht automatisch

Skalieren Sie das Bild vor dem Hochladen in den Imagemap Generator in der gewünschten Größe

Wenn Sie Ihre Grafik in den Imagemap Generator hochgeladen haben, sehen Sie unterhalb des Bildes verschiedene Funktionsbefehle, ein Koordinatenfeld und ein Feld für den HTML-Code. Keine Sorge: Sie müssen kein HTML können, das erledigt das Programm für Sie.

Den zu verlinkenden Bereich für die Image-Map auswählen

Die Koordianten werden vom Imagemap Generator ausgelesen

Wenn Sie mit dem Mauszeiger über das Bild fahren, erscheint ein Fadenkreuz. Mit Klicks auf die gewünschte Stelle, können Sie den später zu verlinkenden Bereich markieren

  • Fahren Sie jetzt mit dem Mauszeiger über die Grafik.
  • Mit einem Klick an die gewünschte Stelle auf das Bild legen Sie die erste Koordinate fest. Diese wird von Imagemap Generator erkannt und automatisch unten in die Felder übertragen. An diesen Stellen müssen Sie erst einmal nichts bearbeiten.
  • Bewegen Sie den Mauszeiger an die nächste Stelle und klicken Sie wieder. Sie sehen, dass der Bereich farbig markiert wird.
  • Arbeiten Sie sich so im Uhrzeigersinn um den Bereich, der später verlinkt werden soll.
  • Wollen Sie einen weiteren Bereich wählen, klicken Sie auf den Befehl „Add Area“. Sie können dann von neuem ein Markierungsfeld auf der Grafik bestimmen.
  • Haben Sie sich verklickt, wählen Sie „Clear Last“ aus.
  • Achtung: Der Befehl „Clear All“ löscht Ihre gesamten Markierungen! Wechseln Sie während Ihrer Arbeit außerdem nicht die Grafik aus – dadurch gehen Ihre Arbeiten ebenfalls verloren.

Am besten eigenen sich (annähernd) quadratische oder rechteckige Markierungen, die die gewünschte Fläche gut umfassen. Arbeiten Sie sich am besten von links nach rechts durch die Grafik.

Im Easy Imagemap Generator können verschiedene Bereiche für die Verlinkung ausgewählt werden

So könnte eine Grafik aussehen, die eine Image-Map werden soll. Die vier markierten Bereiche sollen später auf unterschiedliche Seiten verlinken

Bildquelle und Verlinkungen im Easy Imagemap Generator einsetzen

Haben Sie alle Bereiche markiert, arbeiten Sie sich durch das HTML-Code-Feld. Aber auch hier benötigen Sie keine extra Kenntnisse, Sie müssen nur ein paar Inhalte im Code ausfüllen, bzw. erstetzen.

Im Easy Imagemap Generator können Sie verschiedene Links für die Grafik erstellen

Die verschiedenen Bereiche sind im HTML-Feld mit „area …“ gekennzeichnet. Arbeiten Sie daher in einer Reihenfolge, dass Sie später die einzelnen Codes den zu verlinkenden Bereichen zuordnen können.

  1. Erstzen Sie die URL in „src=“…“ mit der Datei-URl Ihres Bildes.
  2. Fügen Sie einen alt-Titel, einen Titel und in „href=“…“ den Link ein, auf den der Bereich in der Image-Map verlinken soll.

Imagemap Creator HTML-Code kopieren und ins Redaktionssystem einfügen

Um eine Imagemap zu erstellen, muss der Code aus dem Easy Imagemap Generator kopiert werden

Wählen Sie den gesamten Code aus und kopieren Sie Ihn in Ihr Redaktionssystem

Haben Sie alle Angaben im Code ausgefüllt, kopieren Sie den HTML-Code. Fügen Sie ihn in Ihr Redaktionssystem ein. Achten Sie darauf, dass Sie dabei die html-Ansicht oder ein entsprechendes HTML-Element auswählen.

Imagemap Generator: HTML-Code

Und so sieht die Image-Map dann auf der Website aus:

Probieren Sie es einfach mal aus. Bei Fragen können Sie gerne hier einen Kommentar hinterlassen.

Die Anleitung können Sie auch hier als PDF herunterladen [992 KB]

*Easy Imagemap Generator by Dario D. Müller

Keine Tipps mehr verpassen und bequem per E-Mail zuschicken lassen:

⊗ 1 x pro Monat ⊗ jederzeit kündbar ⊗ keine Datenweitergabe an Dritte

Newsletter-Anmeldung

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
Der Newsletter wird über den Versanddienstleister CleverReach versendet, bei dem Ihre Daten nach Ihrer bestätigten Anmeldung gespeichert werden. Hinweise zum Anmeldeverfahren, Versanddienstleister, zur statistischen Auswertung und zum Widerruf finden Sie in unserer Datenschutzerklärung.

Internet-Tipps Öffentlichkeitsarbeit-Tipps Medien und Technik Tipps Präsentieren Tipps

Seminar-Tipps: Erfolgreiche Website erstellen, aufbauen und pflegen

Nadja Golitschek

Hallo, ich bin Online-Redakteurin im Evangelischen Medienhaus in Stuttgart. Hier schreibe ich rund um die Themen Internet, digitale Medien und gelungenes Präsentieren.

Nadja Golitschek