Responsive Image Map

Mit "Responsive Image Maps" können, mit einer Grafik versehene Verknüpfungen (Bereiche) auf einem Hintergrundbild positioniert werden. Position und Größe der rechteckigen Verknüpfungen passen sich dabei der Größe des Hintergrunds an. Wenn Sie die Größe des Browserfensters verändern, sehen Sie den Effekt.

Vorlagenbreite und Vorlagenhöhe beschreiben die Maße des Hintergrundbildes, das man verwendet, um die Positionen der Verknüpfungen auszumessen. Die Angaben zu Höhe und Breite der Bereiche beziehen sich ebenfalls auf die Vorlagenmaße und verkleinern sich je nach Darstellungsgröße der Image Map. Das Standard Icon kann beim Bearbeiten der einzelnen Bereiche überschrieben werden.

Bereiche

bezogen auf die Vorlagengröße, wird beim Bereich der Abstand von links und der Abstand von oben in Pixelangaben eingetragen, bzw. durch Anklicken der gewünschten Position im Vorschaubild über der Eingabemaske ausgewählt. Falls die Größe des Bereichsrechtecks von der Standardgröße abweichen soll, kann man eine individuelle Größe angeben. Das Hintergrundbild der Verknüpfung (Icon) kann ebenfalls individualisiert werden. Am besten eignen sich svg Vektorgrafiken, da sie ohne Qualitätsverlust in jeder beliebigen Größe dargestellt werden können. Man kann einzelne Bereiche auch über das Augensymbol in der tabellarischen Ansicht vorübergehend verbergen.

Einbinden im Frontend

Über das Medienelement "Responsive Image Map" kann die fertig konfigurierte Karte auf einer Seite eingebunden werden.