Zum Inhalt springen
Technische Universität München

ImageMap

Ein ImageMap ist eine verweissensitive Grafik. Damit können Bereiche (Areas) der Grafik verlinkt werden.

ImageMap erstellen

Screenshot: ImageMap Generator
Bild 1: ImageMap Generator
Screenshot: Anklickbare Areas definieren
Bild 2: Anklickbare Areas definieren

Wir zeigen Ihnen anhand des Beispiels des Organigramms der ZA2-Abteilung, wie Sie eine Imagemap erstellen.

  1. Laden Sie das Bild, welches als ImageMap genutzt werden soll, in das Dateisystem von TYPO3 (FileList) hoch. Nutzen Sie ein *.jpg- oder *.png-Format.
  2. Öffnen Sie https://www.image-map.net/ und wählen "Load Image from Website". Tragen Sie dann den Link für das Bild ein (in unserem Beispiel die https://www.personal.zv.tum.de/fileadmin/w00bfr/www/Organigramm/Organigramm_Personal_2022_05.jpg). Sie erhalten dann eine Ansicht wie in Bild 1.
  3. Ziehen Sie die rechteckigen Felder für die anklickbaren Areas auf, indem Sie die 2 diagonalen Punkte eines Rechtecks setzen. Danach können Sie durch Ziehen einer Ecke das gewünschte Rechteck noch korrigieren (Bild 2).
  4. Ins Feld "Link" setzen Sie die gewünschten Ziel-Links.
  5. Wenn Sie alle Felder inkl. Links definiert haben, klicken Sie bitte auf "Show Me The Code", klicken dann ins graue Feld und markieren diesen Code mit [Strg]+[A] und kopieren ihn mit [Strg]+[C]
  6. Fügen Sie diesen Code in eine Textdatei ein, die Sie an das TYPO3 Team schicken. Wir bauen dann diesen Code ein.
To top