Interaktive Erklärbilder (ImageMap): Scrollevent nach Klick auf Labels bzw. Icons aktivieren

Navigation

Veröffentlichungsdatum: 22. Februar 2023
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

So können Sie einstellen, dass onClick zu dem ImageMap-Marker oder den jeweiligen Label gescrollt wird.

Je nach Ansicht ist es wünschenswert, dass onClick auf den Marker der ImageMap die Seite zum passenden Label gescrollt wird und/oder umgekehrt.

Das kann für die Marker sowie für die Labels aktiviert werden, indem deren div-Container (.imageMapEntries oder .imageMapLabels) das Attribut data-scrollToElement=yes hinzugefügt wird.

Sie können das entweder über CSS-Only lösen oder über Javascript.

CSS-Only

Javascript/jQuery

CSS-Only

Scrollverhalten für Marker und/oder Labels einstellen.

/*Container der Marker*/
.imageMapEntries{
  -w-add-data:scrollToElement=yes;
}

/*Container der Labels*/
.imageMapLabels{
  -w-add-data:scrollToElement=yes;
}

Javascript/jQuery

Snippet über jQuery


jQuery('.imageMapEntries').attr('data-scrollToElement', 'yes');
jQuery('.imageMapLabels').attr('data-scrollToElement', 'yes');