Imagemap

  1. Backend in Chrome öffnen.
  2. Bild in Dateiliste hochladen
  3. In Zentraledaten die Seite "Imagemap" aufrufen und auf die Listenansicht wechseln
  4. Hier sind alle bisher angelegten Imagemaps zu sehen, um eine neue anzulagen auf plus klicken
  5. Im Datensatz Imagemap die Dachzeile (Stand) und die Überschrift (Title) eingeben, das Bild aussuchen und speichern.
  6. Einträge anlegen: In der Listenansicht "Popup" hinzufügen. Hier werden der Text, die Überschrift und das Logo für die Popups gepflegt. Das Popup erscheint im Frontend bei Klick auf die Imagemap. Mehrere Popups können in einem Slider durchgeklickt werden. Die Popups werden im Slider in der Reihenfolge angezeigt, wie die Popups später in der Imagemap angeordnet werden.
  7. Zurück in den Datensatz der Imagemap wechseln und unter "Popup" rechts im Fenster "Verfügbare Objekte" die jeweiligen Popups auswählen/referenzieren, die in der Imagemap angezeigt werden sollen.
  8. Das Dashboard "Image Map Designer" links in der Liste aufrufen: Imagemap aussuchen und auf "edit" klicken. (muss man leider zweimal machen, um die Demo zu übergehen).
  9. Im Bild einen Rahmen aufziehen oder ein Polygon erzeugen (Polygon schließt man mit Klick auf den ersten erstellten Punkt, der auch leicht weiß hinterlegt ist)
  10. Rechts neben dem Bild erscheinen in der Liste alle gesetzten Rahmen oder Polygone und können zur weiteren Bearbeitung ausgewählt werden.
  11. Links in der Liste unter Actions kann nun pro Rahmen/Polygon entweder ein externer/interner Link hinterlegt werden (Follow link) oder ein Slide referenziert werden. Für den Slide unter "Run Script" das Script, das ganz oben angezeigt wird im Format "getImIndex16(22);" in das Textfeld kopieren.
  12. Speichern.
  13. Seite aufrufen, in der die Imagemap eingebaut werden soll. Neues Element hinzufügen und  unter "Plugins" das Plugin "Image map" auswählen. Im Reiter "Plugin" (rot) dann die Imagemap referenzieren (Zentrale Daten > Imagemaps)
  14. Der Titel des Pop-ups, welches beim Hovern angezeigt wird, muss extra im Image Map Designer im jeweiligen Shape angepasst werden.