[mae_image_map] Responsive ImageMaps ohne JavaScript

[marebe]

Diese Erweiterung bildet die Funktionsweise von verweissensitiven Grafiken, die normalerweise über <map> und <area>-Tags dargestellt werden in abgewandelter Form nach, sodass sich die Rechtecke mit den Verweisen in Größe und Position automatisch an das übergeordnete Bild anpassen.
Die "ImageMaps" können komplett vom Redakteur im Backend konfiguriert werden. Nur wenn es darum geht, spezielle Layouts oder Effekte abzubilden, muss das CSS/Javascript bemüht werden.
Das Contentelement erweitert das normale "Bild"-Element um die Angabe der zu verwendenden ImageMap. Die vordefinierten Bildgrößen des Themes können wie gewohnt verwendet werden.

An mich wurde in letzter Zeit mehrmals der Wunsch heran getragen, eine ImageMap z.B. für Parkplatzangebote oder Wegpunktbeschreibungen auf einer "Nicht-Google-Landkarte" abzubilden. Früher verwendete ich dafür ein HTML-Modul mit einer ImageMap und habe die dort hart codierten Maps per jQuery-rwdImageMaps responsive gemacht.
Mit der Zeit wurde mir das zu stupide und extra dafür ein jQuery-Plugin wollte ich auch nicht haben. Also zumindest ich bin mit meiner neuen Lösung sehr zufrieden.
Sie entstand quasi als Nebenprodukt eines Webprojekts.

Über Feedback jeder Art würde ich mich sehr freuen.

• Handbuch und Demo
• GitHub
• packagist
• ER2

[tamague]

Tolle Erweiterung.. kein rechnen mehr und responsive auch noch ! - nutze sie als Menü...

[marebe]

Tolle Erweiterung.. kein rechnen mehr und responsive auch noch ! - nutze sie als Menü...

Dankeschön!
Das würde mich interessieren, wie das Menü geworden ist. Kannst Du mir da bei Gelegenheit mal einen Link schicken?

[tamague]

Habe gearde erst mit der Seite begonnen.... liegt local auf meinem Rechner
wenn ich fertig bin schicke ich Dir den Link

LG Tanja

[laRocca]

Hallo zusammen,

ich habe gerade die tolle Imagemap-Erweiterung auf einer meiner bestehenden Seiten installiert (und bisher 2 Standorte eingebaut [sind unterschiedlich formatiert zur Ansicht]) und komme im Grunde ganz gut damit zurecht. Jedoch passiert dort etwas das ich nicht nachvollziehen kann u das möchte ich korrigieren:
Wenn ich über die jeweiligen Links fahre, erscheint auch die Beschreibung, sie verschwindet allerdings nicht mehr. Woran könnte das denn liegen?

Danke schon mal ;-)

[marebe]

Hallo zusammen,

ich habe gerade die tolle Imagemap-Erweiterung auf einer meiner bestehenden Seiten installiert (und bisher 2 Standorte eingebaut [sind unterschiedlich formatiert zur Ansicht]) und komme im Grunde ganz gut damit zurecht. Jedoch passiert dort etwas das ich nicht nachvollziehen kann u das möchte ich korrigieren:
Wenn ich über die jeweiligen Links fahre, erscheint auch die Beschreibung, sie verschwindet allerdings nicht mehr. Woran könnte das denn liegen?

Danke schon mal ;-)

das ein-/ausblenden der Beschreibung wird ja nicht von der Erweiterung selbst gemacht. Ich habe nur auf der Dokuseite ein jQuery Besispiel eingebaut, wie man das Einblenden lösen könnte:
http://martin-eberhardt.com/mae_image_map.html

Zum Ausblenden müsste man das entsprechende Gegenstück beim mouseleave() hinzufügen

[laRocca]

ich kann leider überhaupt kein javascript –*könntest Du mir ein bischen genauer auf die Sprünge helfen?

[Andreas]

Du kannst das auch ohne JS nur mit CSS lösen. Beispiel:

/* CSS */
a.area:hover {
  background-color: rgba(255, 0, 0, .5);
  z-index: 1;
}
a.hasDescription:hover + div.description,
div.description:hover {
  background-color: rgba(0, 255, 0, .2);
  clip: auto;
  height: auto !important;
  margin: auto;
  width: auto !important;
} 

Leider benutzt du dort sehr starke Selektoren, Beispiel #areaDesc-1.description, welche dann nicht mehr leicht zu ändern sind. Auch sonst benutzt du dort sehr viel !important, was sämtliche Anpassungen erschweren.

[marebe]

ich kann leider überhaupt kein javascript –*könntest Du mir ein bischen genauer auf die Sprünge helfen?

so ist der Code für das Beispiel auf meiner Homepage:

$('.ce_mae_img_map .area').mouseenter(function() {
	desc = $('#' + $(this).attr('data-description-id'));
	desc.css('display', 'none');
	desc.removeClass('invisible');
	desc.fadeIn(300);
});
$('.ce_mae_img_map .area').mouseleave(function() {
	desc = $('#' + $(this).attr('data-description-id'));
	desc.addClass('invisible');
	desc.css('display', 'block');
});

[laRocca]

SUPER ! Das hat funktioniert! VIELEN DANK!

[Andreas]

Wenn du die .description in Relation zum .area anzeigen möchtest, dann solltest du die beiden über eine Templateanpassung mit einem DIV wrappen, oder per JS. Oder die Positionswerte von .area abgreifen und auch auf die .description aufsetzen (Template oder JS).

Deine erste Version funktionierte auch nicht, weil du das .description über das .area gelegt hattest und sobald das dann eingeblendet wurde feuerte das mouseleave des .area wieder. Du hast damit einen Loop erzeugt. Setze .area auf z-index: 1; damit das nicht passiert.

Hier mal ein etwas einfacher zu lesendes JS

/* JS - jquery */
var descLinks = $('.hasDescription'), desc;

descLinks.mouseenter(function() {
  desc = $(this).next('.description');
  desc.css('display', 'none');
  desc.removeClass('invisible');
  desc.fadeIn(300);
});
descLinks.mouseleave(function() {
  desc = $(this).next('.description');
  desc.addClass('invisible');
  desc.css('display','block');
}); 

[laRocca]

Super, danke !
Hab ich auch noch geändert ;-)

[Andreas]

Du hast nur einen Teil davon genommen. Hat das nicht funktioniert? Die Mouse-Events sollten ja nur für .area aufgesetzt werden, welche auch eine Description haben. So wie es im Moment ist macht es keinen Sinn.

[laRocca]

Ja, das hat funktioniert. Ich hab jetzt Deins eingesetzt –*ist es jetzt richtig?

[Andreas]

Ja, jetzt stimmt es. Das z-index brauchtest du nur, wenn du die Description über das .area legst wie in deiner ersten Version. Schadet aber auch nicht. Ist gut für den Fall, wenn die Description mal über dem .area sein sollte.

[laRocca]

super! dankeschön für den umfangreichen Support!

[Curve]

Ich habe diese Erweiterung installiert, jedoch kommt sobald ich unter Inhalte auf "ImageMaps" gehe oder ein neues Element als ImageMap anlegen möchte eine Fehlermeldung.
Aus dem error.log werde ich allerdings nicht wirklich schlau:

[07-Feb-2017 14:26:28 Europe/Berlin] PHP Fatal error: Uncaught exception 'Exception' with message 'Query error: Table 'domainsql1.tl_mae_img_map' doesn't exist (SELECT id, title AS value FROM tl_mae_img_map WHERE tstamp>0 ORDER BY value)' thrown in /var/customers/webs/domain/www.domain.de/system/modules/core/library/Contao/Database/Statement.php on line 295
#0 /var/customers/webs/domain/www.domain.de/system/modules/core/library/Contao/Database.php(207): Contao\Database\Statement->query('SELECT id, titl...')
#1 /var/customers/webs/domain/www.domain.de/system/modules/core/library/Contao/Widget.php(1399): Contao\Database->query('SELECT id, titl...')
#2 /var/customers/webs/domain/www.domain.de/system/modules/core/classes/DataContainer.php(265): Contao\Widget::getAttributesFromDca(Array, 'tl_mae_img_map_...', NULL, 'tl_mae_img_map_...', 'tl_content', Object(Contao\DC_Table))
#3 /var/customers/webs/domain/www.domain.de/system/modules/core/drivers/DC_Table.php(1945): Contao\DataContainer->row('{type_legend},t...')
#4 /var/customers/webs/domain/www.domain.de/system/modules/core/classes/Backend.php(650): Contao\DC_Table->edit()
#5 /var/customers/webs/domain/www.domain.de/system/modules/core/controllers/BackendMain.php(131): Contao\Backend->getBackendModule('article')
#6 /var/customers/webs/domain/www.domain.de/contao/main.php(20): Contao\BackendMain->run()
#7 {main}

Ich vermute es gibt ein Problem mit der Datenbank?

[Andreas]

Hast du manuell installiert und kein Datenbank-Update gemacht?

[Curve]

Installiert habe ich über den Erweiterungskatalog.
Meinst Du unter der Erweiterungsverwaltung den Button Datenbank aktualisieren?

Das habe ich noch nicht gemacht. Ich nehme an, dass das wohl notwendig ist?
Besteht dabei eine Gefahr für die restlichen Inhalte? Ich bin hier noch etwas unsicher.

[marebe]

da passiert nichts. Das Aktualisieren synchronisiert immer komplett den Quellcode und die Datenbank.
Wenn Du die DB aktualisiert hast, dann ist auch der Fehler weg. Der tauchte nur auf, weil die Tabelle noch nicht in der Datenbank angelegt wurde.

[Curve]

Super, vielen Dank euch beiden!

[Andreas]

Ja genau, diesen Button meinte ich.

Wenn du unsicher bist, dann führe die DROP-Anweisungen nicht aus, damit werden nämlich Tabellen oder Spalten in der DB unwiderruflich gelöscht. Deswegen sind diese Anweisungen default auch nicht angehakt.

Contao durchsucht den Core und die Erweiterungen nach benötigten Tabellen und Feldern, welche in den PHP-Dateien in den dca/-Ordnern deklariert werden. Manche ältere Erweiterungen haben auch noch *.sql-Dateien im config/-Ordner mit Anweisungen für die DB.

Contao weiß dann, was alles vorhanden sein muss und wenn die DB Unterschiede dazu aufweist, bekommst du diese Aufforderung zum Modifizieren der DB, damit sie genau so ist, wie sie von Contao benötigt wird.

Manche Anweisungen für die DB können auch in der system/config/dcaconfig.php stehen. Damit kann man Felder updatesicher anpassen.