Banner mit Imagemap hinterlegen

  • Hallo,


    ich habe auf der Seite http://www.kirche-dw.de ein Banner erstellt. Jetzt wollte ich gerne die dazugehörige imagemap implementieren. Das geht allerdings nicht. Folgende zwei Ansätze habe ich gestartet:


    1. Banner-Modul erstellt

    benutzerdefinierter Banner mit folgendem Code

    Hier wird mir der Banner angezeigt, allerdings komme ich immer nur zum ersten Link, egal worauf ich klicke.


    2. Beitrags-Modul erstellt

    • Beitrag mit obigem Code erstellt - funktioniert offensichtlich
    • im Betragsmodul Kategorie des Beitrags eingebunden
    • mir wird nur der Name des Beitrags aber nicht das Bild als Map angezeigt

    Was mache ich falsch? Könnt ihr mir hier bitte helfen? Vielen Dank!

    cnp


    edit: Ich sollte vielleicht noch ergänzen, dass ich mich an diese Anleitung gehalten habe.

  • Ich würde an Deiner Stelle etwas anderes nehmen und nicht das Banner als Image-Map.

    Das Problem ist, das Image-Maps so nicht responsive sind. Das heißt die angegebenen Koordinaten bleiben fix bestehen und passen sich nicht dem Bild an. Das Bild hat eine Ausgangsgröße von 4681x495 Pixel. Auf Grundlage der Ausgangsgröße hast Du die Koordinaten erstellt.


    Auf der Seite wird das Bild jedoch (bei mir) in einer Größe von 940x99 Pixel angezeigt. Die erste Koordinate nimmt somit fast die gesamte Fläche ein. Bei der dritten Kirche von rechts, beginnt die Koordinate der zweiten Area. Die Areas passen sich somit nicht dem Bild an. Es gibt zwar ein paar Lösungsvorschläge, doch bevor ich mir diesen Aufwand mache, würde ich eher eine Übersichtsseite mit kleinen Einzelbildern machen und diese dann verlinken.

    https://www.mediaevent.de/html/area-map.html

  • Falls du magst, kannst du dir meine Komponente

    https://github.com/astridx/pkg_agadvents

    ansehen.

    Die ist als Adventskalender gestartet, deshalb der Name. Sie wird aber heute mehr als responsive Imagemap genutzt.


    Wenn du sie installieren magst, findest du die Installationsdatei hier: https://github.com/astridx/pkg_agadvents/releases/tag/v2.0.7

  • Danke für eure Antworten!

    LukasHH Ich hatte im stillen gehofft, dass die Größe der Map dem Bild angepasst wird. Aber klar, die Hoffnung war unlogisch und wurde deshalb nicht erfüllt. Das sagt mir aber, dass meine Variante mit dem Banner wahrscheinlich doch funktioniert, nur eben die Map nicht dynamisch ist.


    astrid Vielen Dank! Ich werde deine Komponente nutzen. Es ist offensichtlich genau das, was ich will. Wenn es klappt, schließe ich das Thema offiziell. :)


    Ich denke, dass ich die Erweiterung verstanden habe. Allerdings kann ich jetzt das Bild nicht für alle Seiten sichtbar machen, weil es einen eigenen Menüpunkt darstellt, oder sehe ich das falsch? Ich will ja letztlich einen Banner haben.


    Ich habe jetzt die Bildgröße festgelegt (700 px Breite) und die Map dafür eingefügt und schon funktioniert es im Bannermodul. Problem gelöst, allerdings etwas statisch.

    Vielen Dank euch!

    cnp

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: 2 Beiträge von copyandpaste mit diesem Beitrag zusammengefügt.

  • Da habe ich aber nicht verstanden, wie das gehen soll. Erklärst du es bitte nochmal kurz?


    Ja, wie Elwood schreibt kannst du das Agadvents-Modul wie jedes Joomla-Modul bestimmten oder allen Menüpunkten zuweisen. Aber du hast ja ohne Erweiterung schon was du magst. Das ist immer am besten.


    Problem gelöst, allerdings etwas statisch.

    Meinst du mit statisch die Begrenzung in der maximalen Größe? Versuche einmal das CSS in der custom.css deines Templates, falls du das Banner immer auf 100% haben magst:


    Code
    .banneritem > img, img[usemap], map area {
    min-width:100%;
    }
  • Hallo,


    wegen der CSS Eintragung: Bei Dir ist es die: user.css. Da fehlt noch eine Korrektur:


    ab Zeile 96 /*convertforms*/ sind auskommentierte bzw. inaktive CSSen. In der letzten Zeile 124, fehlt aber das da:

    Code
    */

    Danach kannst Du dann den Code von astrid reingeben, sonst wirkt dieser nicht.

    (Ohne obiger Änderung, also: */ könnte man diesen nur vor der Zeile 124 reinstellen).


    Liebe Grüße

    Christine

  • Danke Christine, ich bin noch am Basteln mit dem Hintergrundbild für die Beiträge. Deshalb fehlt die Auskommentierung. Ich war ganz überrascht, dass man so "unsauber" in css arbeiten darf. Für mein Problem muss ich aber wahrscheinlich einen extra Thread aufmachen. Ich werde aus den anderen Threads noch nicht schlau. Ich kann es bisher nicht auf mich übertragen.


    astrid Ich habe jetzt ein leeres Modul mit dem Bannerbild genommen, weil ein Banner mit Adblockern ausgeblendet wird. Das ist für meinen Zweck irgendwie sinnfrei... Da dürfte die Klasse dann nicht mehr .banneritem heißen oder?