Support » Allgemeine Fragen » Image map funktioniert in Widget nicht

  • Gelöst sgschossmann

    (@morethemerrier)


    Hi zusammen,

    ich versuche zwei Badges für App Store und Play Store im Footer zu hinterlegen. Ich nutze auf der Seite dieses neue Widget Tool. Es scheint schonmal nicht möglich zu sein, zwei Grafiken nebeneinander zu stellen in einem Footer, daher dachte ich ich arbeite mit zwei Verlinkungen via Image map. Die Image map funktioniert auch, wenn ich sie beispielsweise zu Testzwecken in eine Seite via Page Builder integriere. Aber sobald ich das im Footer integriere funktioniert es nicht mehr.
    Ich nutze folgenden Code:

    <img src="https://www.gerd-kommer-capital.de/medien/Badge-2022.png" usemap="#image-map">
    
    <map name="image-map">
        <area target="_blank" alt="App Store" title="App Store" href="https://apps.apple.com/de/app/gerd-kommer-capital/id1535029910" coords="496,78,4,244" shape="rect">
        <area target="_blank" alt="Play Store" title="Play Store" href="https://play.google.com/store/apps/details?id=capital.kommer.gerd&gl=DE" coords="1046,84,547,235" shape="rect">
    </map>

    Hat jemand eine Idee, was dahinter steckt? Ich würde mich mega freuen, wenn mir jemand helfen könnte.

    Danke schonmal!

    Liebe Grüße
    Selina

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Es scheint schonmal nicht möglich zu sein, zwei Grafiken nebeneinander zu stellen in einem Footer …

    Grundsätzlich geht das – vorausgesetzt der Widget-Bereich ist große genug, um die Grafiken nebeneinander darzustellen.

    daher dachte ich ich arbeite mit zwei Verlinkungen via Image map

    Damit verkomplizierst du die Sache unnötig. Image-Maps sind dazu gedacht, Bereiche eines Bildes zu verlinken. Das wird auf mobilen Endgeräten schnell fummelig und ist wahrscheinlich auch nicht barrierefrei.

    Aber sobald ich das im Footer integriere funktioniert es nicht mehr.

    Du hast doch im Footer vier Grafiken, von denen jeweils zwei nebeneinander stehen. Die noch verlinken und du hast, was du möchtest. Oder habe ich da etwas falsch verstanden?

    Thread-Starter sgschossmann

    (@morethemerrier)

    Danke erstmal für Deine Zeit!

    Grundsätzlich geht das – vorausgesetzt der Widget-Bereich ist große genug, um die Grafiken nebeneinander darzustellen.

    Ich habe die Grafiken bis auf 10-20px mal kurzfristig eingestellt, und trotzdem sind sie dann nicht nebeneinander. Daher keine Ahnung. Das wäre natürlich am saubersten, da ich dann einfach jeweils den href setze und gut ist.

    Damit verkomplizierst du die Sache unnötig. Image-Maps sind dazu gedacht, Bereiche eines Bildes zu verlinken. Das wird auf mobilen Endgeräten schnell fummelig und ist wahrscheinlich auch nicht barrierefrei.

    Wenn ich die Größe über das gesamte Rechteck wähle, dann sollte das doch analog zu einem href funktionieren.

    Du hast doch im Footer vier Grafiken, von denen jeweils zwei nebeneinander stehen. Die noch verlinken und du hast, was du möchtest. Oder habe ich da etwas falsch verstanden?

    Du hast mich grundsätzlich richtig verstanden. Der Witz dabei ist nur, dass die Grafiken gar nicht wirklich nebeneinander stehen. Ich habe es nur als quick fix als eine png-Datei dahinplatziert. Somit sind die beiden oben und die beiden unten jeweils eine Grafik. Bei der oberen ist es auch ziemlich egal, hier brauche ich keine Verlinkungen, aber bei der unteren bräuchte ich eben die Weiterleitungen zu App Store/Play Store.

    • Diese Antwort wurde geändert vor 3 Monaten, 4 Wochen von sgschossmann.

    Wenn ich die Größe über das gesamte Rechteck wähle, dann sollte das doch analog zu einem href funktionieren.

    Du kannst das dann noch in einen eigenen Gruppen-Block packen, der einen Spaltenblock mit nur einer Spalte enthält. Geht alles, nur warum soll man das wollen?

    Du verwendest ein gekauftes Theme, das mir für kostenlosen Support nicht zur Verfügung steht. Ich habe deshalb rasch in einem anderen Theme mit Sidebar (GeneratePress) geprüft und festgestellt, dass ich mit zwei Bild-Blöcken auch Schwierigkeiten habe, die Bilder nebeneinander zu bekommen. Das liegt aber am Stylesheet des Themes, das jedes Bild als eigenes Widget interpretiert und einen großen Zwischenabstand (Padding) zuweist. Als Workaround (um das Stylesheet nicht anpassen zu müssen) habe ich das mit einem Block „individuelles HTML“ gelöst:

    <a href="https://wordpress.org"><img src="https://wp.test/wp-content/uploads/2022/03/cropped-circle-270x270.png" alt="" height=128 width=128></a><a href="https://wordpress.org"><img src="https://wp.test/wp-content/uploads/2022/03/ArtBoard1.png" alt="" height=128 width=128></a>

    Ergebnis sieht so aus:
    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Thread-Starter sgschossmann

    (@morethemerrier)

    Ich würde auch vermuten, dass das Stylesheet das Problem ist. Aber eigentlich ist das alles schon via Individuelles HTML eingefügt. Ich habe eben nochmal mit einem weiteren Block getestet.

    <a href="https://apps.apple.com/de/app/gerd-kommer-capital/id1535029910" target="_blank" rel="noopener"><img src="https://www.gerd-kommer-capital.de/medien/app-store-badge-2022.png" alt="" height="" width=128></a><a href="https://play.google.com/store/apps/details?id=capital.kommer.gerd&gl=DE" target="_blank" rel="noopener"><img src="https://www.gerd-kommer-capital.de/medien/google-play-badge-2022.png" alt="" height="" width=128></a>

    Ergebnis hier (also die unteren beiden Badges): https://imgur.com/lAZUC3c

    Habe ich etwas falsch gemacht?

    • Diese Antwort wurde geändert vor 3 Monaten, 4 Wochen von sgschossmann.
    • Diese Antwort wurde geändert vor 3 Monaten, 4 Wochen von sgschossmann.
    • Diese Antwort wurde geändert vor 3 Monaten, 4 Wochen von Hans-Gerd Gerhards.

    Der Abschnitt wird mir im Browser mit einer Breite von 263 Pixeln angezeigt.
    Zwei Bilder mit 128 Pixeln Breite ergibt 256 Pixel. Wenn da noch ein wenig Margin/Padding vom Theme hinzugefügt wird, reicht der Platz nicht aus.

    Verwende doch mal nur zum Testen eine width=36 – winzig klein, klar, aber dann siehst du ob sie nebeneinander stehen.

    Hallo,
    wenn ich das richtig verstehe, sollte das normalerweise mit einem Gruppenblock und zwei Spalten funktionieren. In jede Spalte kann dann ein Bild eingebunden werden. Gegebenenfalls auch noch den Reihen-Block mal testen.

    BTW: Ich musste deine Antwort erst freischalten. Akismet wollte die nicht freigeben.

    Viele Grüße
    Hans-Gerd

    Nachtrag: ich habe das gerade auch mal nachgestellt – das klappt in der Tat auch nicht mit meinem Vorschlag. 😲

    Thread-Starter sgschossmann

    (@morethemerrier)

    @pixolin Leider geht das dann immer noch nicht. Siehe hier: Badge-Small

    @hage Du verstehst es absolut richtig und wir nähern uns der Lösung. Die Bilder konnte ich jetzt schonmal in zwei Reihen einfügen. Nur die Verlinkung klappt noch immer nicht. Ich habe keine Ahnung, was das soll – siehe hier: Badge-Gruppe

    aber mit dem Reihenblock hat es – wenn ich das Problem richtig verstanden habe – funktioniert.

    Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
    Screenshot Einstellungen

    Also Reihenblock und darin zwei Bilder (ohne Spalten).

    Bei einer Zeile (Reihe) und zwei Bildern kann ich problemlos jeweils eine Verlinkung vornehmen.

    Die Screenshots zeigen zwar das Ergebnis, sind aber zu einer Beurteilung des verwendeten CSS unbrauchbar. Da ich keinen Zugriff auf das Theme habe, kann ich das auch nicht nachbauen.

    Thread-Starter sgschossmann

    (@morethemerrier)

    @hage Ich weiß nicht woran es zuvor gescheitert ist, aber ja Du hast auf alle Fälle Recht. Auf den zweiten Anlauf sieht es nun ganz gut aus. Ich muss das morgen für die oberen beiden Grafiken auch machen, dann muss ich mal schauen, ob ich die Abstände zwischen den Widget Blöcken ändern kann.

    Ein fettes Danke schonmal von mir an Euch beide für eure Zeit!

    Auf den zweiten Anlauf sieht es nun ganz gut aus.

    … na wunderbar.
    Mehr können wir hier wahrscheinlich wie @pixolin schon erwähnt hat wegen des kostenpflichtigen Themes nicht machen. Bei mir klappte das jedenfalls bei GeneratePress problemlos.

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich so weit behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)