Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Problem Responsives ImageMap Modul einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    16.11.2020.
    Beiträge
    2

    Standard Problem Responsives ImageMap Modul einbinden

    Hallo zusammen, ich bin ziemlich neu in Contao und habe gleich mal ein Problem :-)

    Ich benutze Contao 4.9 auf einem lokalem MAMP-System.
    Ich habe ein großes Bild auf welchem ich verschiedene ImageMaps erstellt habe.
    Jetzt hatte ich das Problem, dass beim mitskalieren die ImageMap natürlich nicht mehr passt.

    Damit dieses mitskaliert habe ich folgende Library gefunden:

    https://github.com/davidjbradshaw/image-map-resizer

    Ich habe die Datei imageMapResizer.min.js im Seitenlayout unter „Externe JavaScripts“ eingebunden.
    Im Quellcode kann ich die Libraries auch aufrufen wenn ich den Link anklicke. Der Pfad stimmt also ;-)

    Außerdem habe ich im Seitenlayout dann folgenden Code lt. Anleitung bei „Eigener JavaScript-Code“ eingebunden (ist das richtig? Oder muss ich dafür ein Template anlegen!??):

    PHP-Code:
    <script>
    (function() {
       $(
    'map').imageMapResize();
          });
    </script> 
    Aber das Teil funktioniert leider nicht. Was mache ich falsch? :-(

    Viele Grüße,
    Frank

  2. #2
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.674
    User beschenken
    Wunschliste

    Standard

    Du kannst Dein Bild auch als Hintergrundbild in ein SVG einladen und SVG-Bereiche als Hotspots - ist dann auch ohne JS responsive...

  3. #3
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.704
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Oder die Hotspots gleich mit ins SVG einbinden - also eine SVG-Imagemap aufbauen und normal einbinden.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  4. #4
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.674
    User beschenken
    Wunschliste

    Standard

    @mlweb ... das mein(t)e ich damit...

  5. #5
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.704
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ok, dann hatte ich Dich missverstanden. Muss aber je nach Bild nicht unbedingt ein Hintergrundbild sein. Ich habe das auch schon insgesamt mit SVG gemacht.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  6. #6
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.674
    User beschenken
    Wunschliste

    Standard

    Muss nicht, aber wenn man eine "alte" Imagemap auf resposnsive "portieren" möchte, hat man ja meistens ein Bild als Grundlage - da ist es relativ einfach das als HG einzubinden

    PHP-Code:
    ...
        <
    defs>
            <
    style>
                
    svg {
                    
    background-imageurl('{{file::123}}');
                    
    background-size100100%;
                    
    background-repeatno-repeat;
                }

                
    rect {
                    
    filltransparent;
                    
    cursorpointer;
                    
    transitionfill 0.2s
                
    }

                
    svg a:focus,
                
    svg a:hover {
                    
    outlinenone;
                }

                
    svg a:focus rect,
                
    svg a:hover rect {
                    
    fillrgba(302221210.25);
                    
    cursorpointer;
                }
            </
    style>
        </
    defs>
        <
    g>
            <
    title>Mehr</title>
            <
    a xlink:href="{{link_url::123}}">
                <
    rect x="29.248" y="1311.749" fill="none" width="1014.101" height="282.029"/>
            </
    a>
        </
    g>
    .... 

  7. #7
    Contao-Nutzer
    Registriert seit
    16.11.2020.
    Beiträge
    2

    Standard

    Vielen Dank an alle für die schnelle Hilfe. Das mit dem SVG war ein toller Tip!

    Falls jemand anders auf den Thread stößt, ich habe es jetzt folgendermaßen gelöst:

    - Bild in Illustrator (geht bestimmt auch mit Inkscape) importiert (als Link, nicht eingebettet)
    - Hotspots gezeichnet und diese in Illustrator verlinkt (geht über das Attribute-Fenster)
    - Hotspots auf 0% Deckkraft
    - SVG gespeichert und dann im Texteditor geöffnet und unnötige Infos gelöscht (Adobe Quark etc.)
    - Template in Contao erstellt
    - SVG-Code dort reinkopiert
    - Im Artikel dann ein HTML-Modul erstellt und dort auf das Template mittels Insert-Tag verlinkt {{file::TEMPLATEORDNER/TEMPLATENAME.html5}}

    Funktioniert 1A auf Desktop, Tablet und Smartphone!

    Viele Grüße,

    Frank

  8. #8
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.674
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von fischmachine Beitrag anzeigen
    - SVG gespeichert und dann im Texteditor geöffnet und unnötige Infos gelöscht (Adobe Quark etc.)
    - Im Artikel dann ein HTML-Modul erstellt und dort auf das Template mittels Insert-Tag verlinkt {{file::TEMPLATEORDNER/TEMPLATENAME.html5}}

    - Empfehlung zum Optimieren der SVGs: https://jakearchibald.github.io/svgomg/
    - geht auch als Template(Name) ce_html_my-map-svg.html5 - dann kann man das als Template im BE hei CE HTML auswählen

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •