Contao extension [mae_image_map]

Inhaltselement
Inhaltselement

Diese Erweiterung ermöglicht die Konfiguration von responsive ImageMaps im Contao Backend und stellt ein neues Inhaltselement zur Verfügung.

Der Vorteil dieser Erweiterung liegt darin, dass Redakteure selbstständig ImageMaps erstellen und bearbeiten können. Außerdem ist der Einsatz von Javascript nicht nötig, um die generierten ImageMaps responsive zu machen. Es werden nicht die üblichen <map> und <area> tags verwendet, sondern gewöhnliche Links mit Hintergrundbildern, die anstatt der Bildunterschrift in den Quellcode des Bildes eingefügt werden.

Eine mitgelieferte CSS Datei sorgt für die grundlegenden Formatierungen und der erzeugte HTML-Code ist so gestaltet, dass die Definition eigener Styles und die Zugriffe per JS möglichst einfach zu realisieren sind.

 

 

Frontend Beispiel

Ofen

Konfiguration

ImageMap

Backend - ImageMap
Backend - ImageMap
  • Vorlagenbreite und -höhe
    Hier werden die Dimensionen des Originalbildes eingegeben, in dem man die Koordinaten und Größen der Bereiche abmisst.
  • Standardbreite und -höhe der Bereiche
    Diese Einstellungen sind nützlich, wenn alle Bereiche gleich groß sein sollen und man in den Bereichen den Mittelpunkt als Koordinaten angibt. So hat man später die Möglichkeit, die Standardgröße zu ändern, ohne die Bereiche einzeln anpassen zu müssen.
  • Standard-Hintergrund
    Auch hier gilt der Vorteil, bei Änderungen nicht die einzelnen Bereiche anpassen zu müssen. Wird weder ein Standard-Hintergrund, noch ein spezieller Hintergrund am Bereich definiert, wird ein transparentes GIF verwendet, da der IE8 die Bereiche ohne Hintergrundgrafik nicht anzeigen würde.

Bereiche

Backend - Bereich
Backend - Bereich
  • Bezugspunkt
    Je nachdem, ob es einfacher ist, den Mittelpunkt oder die linke, obere Ecke des Bereichs auszumessen, kann hier der Bezugspunkt festgelegt werden. Der Mittelpunkt ist dahingehend zu bevorzugen, da er bei späteren Größenänderungen des Bereichs nicht angepasst werden muss.
  • Beschreibung
    Die Beschreibung ist im Frontend standardmäßig unsichtbar (Contao-Klasse "invisible").
  • Hintergrunddarstellung
    zentriert: proportinal in der Mitte des Bereichs
    linksbündig: proportional, links
    rechtsbündig: proportional, rechts
    bereichsfüllend: das HG-Bild wird so verzerrt, dass es den gesamten Bereich ausfüllt. Beim IE8 muss hier ggf. mit "DXImageTransform" nachgeholfen werden.
  • CSS-Klasse(n)
    Die Klassen dieser leerzeichengetrennten Liste werden sowohl dem a.area, als auch der .description hinzugefügt. Will man der gesamten ImageMap eine Klasse oder ID verpassen, kann man die Standardfelder im Inhaltselement verwenden.

Erzeugter HTML Code

<div style="margin-top:25px;" class="ce_mae_img_map block">
    <h2>Frontend Beispiel</h2>
    <figure class="image_container">
        <img width="1040" height="691" alt="Ofen" src="assets/images/7/oven-85292a47.jpg">
        <figcaption class="caption">
            <a style="width: 11.333%;height: 13.551%;left: 88.083%;top: 27.604%;background-image: url(stdBg.png);" data-description-id="areaDesc-1" title="Sicherungskasten" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-1"><h2>Sicherungskasten</h2>
                <p>Ein alter, unsicherer Sicherungskasten</p></div>
            <a style="width: 9.833%;height: 16.562%;left: 26.5%;top: 33.124%;background-image: url(stdBg.png);" data-description-id="areaDesc-2" title="Stromding" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-2"><h2>Stromding</h2>
                <p>Eine betagte Gerätschaft, die etwas mit Elektrizität zu tun haben mag</p></div>
            <a style="width: 14.167%;height: 17.566%;left: 6.667%;top: 56.964%;background-image: url(stdBg.png);" data-description-id="areaDesc-3" title="Hintertür" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-3"><h2>Hintertür</h2>
                <p>rätselhafter Durchgang zu einer unbekannten Räumlichkeit</p></div>
        </figcaption>
    </figure>
</div>

Alle relevanten tags befinden sich innerhalb des <figcaption> Blocks, also ".ce_mae_img_map .caption"

  • a.area
    Die Bereiche verfügen über die Klasse "hasDescription", sofern eine Beschreibung für den Bereich eingegeben wurde und "hasLinktext", wenn ein Linktext vorhanden ist.
    Im Attribut "data-description-id" befindet sich die ID des zugehörigen ".description" Blocks. Zudem können im Backend individuelle Klassen pro Bereich definiert werden, die dann sowohl bei der area, als auch bei der description hinzugefügt werden.
  • div.description
    Die Beschreibung ist standardmäßig unsichtbar, weil davon ausgegangen wird, dass sie mittels eigenem Javascript Code verarbeitet wird. Die berechneten Positions- und Größenangaben, sowie das definierte Hintergrundbild werden als inline-styles hinzugefügt.

CSS Anpassungen

.ce_mae_img_map .image_container {position: relative;overflow: hidden}
.ce_mae_img_map .area {display: block;position: absolute;background-position: center center;background-repeat: no-repeat;background-size: contain}
    .ce_mae_img_map .area.stretch-bg {background-size: 100% 100%}
    .ce_mae_img_map .area.left-bg {background-position: left center}
    .ce_mae_img_map .area.right-bg {background-position: right center}

Dies sind die Standard CSS-Eigenschaften, die mit der Extension mit geliefert werden. Sie können natürlich jederzeit überschrieben, bzw. erweitert werden.

jQuery Codebeispiel

// Hover der area blendet die description ein
$('.ce_mae_img_map .area').mouseenter(function() {
	desc = $('#' + $(this).attr('data-description-id'));
	desc.css('display', 'none');
	desc.removeClass('invisible');
	desc.fadeIn(300);
});

Kommentare

Kommentar von Hössel |

Hervorragende Extension, großes Lob Martin!

Antwort von Martin Eberhardt

Vielen Dank!

Kommentar von Schmidty |

Hallo,
geniale Erweiterung.
Ich habe das Problem, dass ich unter dem Imagemap-Foto einen 6 Pixel großen Streifen sehe und die Beschreibung über Javascript nicht angezeigt wird. Im Quelltext sind alle Angaben vorhanden.
Es ist eine Contao 3.5.6-Installation mit der official_demo als Basis.
Ein Link zur Seite, einen FTP- und Backendzugang kann gerne zur Verfügung gestellt werden.

Und noch eine Anfrage bzw. einen Verbesserungsvorschlag: Wird die Erweiterung weiterentwickelt, so dass zugünftig auch Kreise und Polygone möglich sind z.B. für Gemarkungsgrenzen usw. ?

Antwort von Martin Eberhardt

Hallo Schmidty,

der Pixelabstand wir vmtl. daher kommen, dass die Bilder in Deinem CSS inline-Elemente sind. Versuch mal explizit Blockelemente daraus zu machen. Wenn Du mir einen Link schickst kann ich's mir mal anschauen. Kreise und Polygone wirds wohl nicht geben. Es ist ja keine echte ImageMap, sondern ein DIV-Nachbau. Wenn sich CSS-Shapes mal etabliert haben, wird man sowas machen können. Ist mir aber noch zu früh.

Viele Grüße,
Martin

Kommentar von Dan |

Hallo,

ich habe die Erweiterung installiert - genau das was ich gesucht habe. Danke!
Hast du einen kleinen Tipp, wie ich die Beschreibung einer einzelnen Area nach Klick auf selbige unterhalb der Map-Grafik angezeigt bekomme? Javascript ist leider nicht mein Ding.

Eine zweite Frage: Hat es einen bestimmten Grund, dass "Link" bei den Positionen ein Pflichtfeld ist?
Besten Dank und Grüße
Dan

Antwort von Martin Eberhardt

Hallo Dan,

Du könntest die Beschreibungen auch auf einer jeweils eigenen Seite als normalen Artikel machen und als Link dann diese Seite vergeben. Oder Du verwendest Anker. Ansonsten brauchst Du Javascript. Ich wollte kein fertiges Script mit liefern, weil nicht alle Seiten jQuery verwenden und ich dort keine Script-Fehler produzieren wollte.

Warum der Link ein Pflichtfeld ist weiß ich gerade ehrlich gesagt nicht mehr. Vermutlich weil die Beschreibungen erst später dazu gekommen sind und davor eine Area ohne Link keinen Sinn gemacht hätte. Die Areas sind schon per Definition ein Link-Tag, der ja auch ein href-Attribut braucht. Das zu ändern wäre nicht abwärtskompatibel.

Viele Grüße,
Martin

Kommentar von Dan |

Hallo Martin, danke für deine rasche Antwort.
Ich habe es nun zunächst mit mouseenter / mouseleave wie in deinem Beispiel gelöst. Kannst du mir helfen, die Beschreibung in einem separaten DIV-Container unterhalb des Bildes und per Klick darzustellen? Also die jeweilige Beschreibung per Klick auf die Area ein/aus bzw. bei Klick auf eine andere Area eine andere Beschreibung in den DIV-Container.

Vielen Dank und viele Grüße
Dan

Kommentar von Dan |

Hallo Martin,

habs hinbekommen. Recht vielen Dank für die tolle Erweiterung!

Gruß
Dan

Kommentar von Eva |

Hallo Martin

Vielen Dank für die tolle Erweiterung!
Ist es möglich, das Pflichtfeld für den Link irgendwie zu umgehen oder zu löschen?

Liebe Grüsse
Eva

Antwort von Martin Eberhardt

Hallo Eva,

ich habe gerade eine neue Version (1.0.3) veröffentlicht. Der Link ist jetzt kein Pflichtfeld mehr. Lässt man ihn leer, wird ins href-Atribut ein "javascript:void(0)" geschrieben.

Kommentar von Eva |

Hallo Martin

Vielen lieben Dank für die schnelle Änderung! Perfekt!

Liebe Grüsse
Eva

Kommentar von Corbinian |

Hallo Martin,

tolle Erweiterung. Dies würde wunderbar zu meinem neuen Projekt passen. Ich hätte allerdings einen Vorschlag oder vielleicht auch einen Wunsch. Was würde gegen eine JS gebundene Möglichkeit sprechen, dass die Koordinaten per Klick in die Felder eingetragen werden.

Beispiel:
http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/

Sonst benötigt man immer ein Grafikprogramm oder ähnliches, damit man an die Navigation kommt.

Gruß Corbinian

Antwort von Martin Eberhardt

Hallo Corbinian,
wenn, dann müsste man das selbe Tool verwenden, das Contao im BE für die Auswahl des wichtigen Bildausschnitts verwendet. Leider habe ich momentan nicht die Zeit dafür. Meine Erweiterungen sind ja Nebenprodukte aus bezahlten Projekten. Ich kann ja mal die Kunden fragen, ob sie es bezahlen würden und natürlich auch, ob sie es überhaupt haben wollen ;).
Viele Grüße, Martin

Kommentar von Sally |

Hallo Martin,
genau so etwas brauche ich gerade - super! Nur: wird mit im frontend nichts angezeigt. Im Backend auf Artikelebene in der Elemente-Übersicht sehe ich die Map und sogar wie sie bei hover reagiert, doch im Frontend geschieht gar nichts. Magst du ein Auge drauf werfen - die imagemap liegt auf dem EG-Grundriss ganz oben in 170 x 170px Größe?
http://www.yard-hamburg.de/wohnungen.html
Lieben Dank im voraus,
Sally

Antwort von Martin Eberhardt

Hallo Sally,
ich hab Dir die Lösung gerade gemailt.
Viele Grüße, Martin

Kommentar von Thorsten |

Hallo Martin,
ich hab das gleiche Problem wie Sally - wie sieht den die Lösung aus?
Viele Grüße und Dank im Voraus.
Thorsten

Antwort von Martin Eberhardt

also bei Sally musste im CSS Folgendes rein:
.ce_mae_img_map .image_container {position: static !important}