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

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

Oder die Hotspots gleich mit ins SVG einbinden - also eine SVG-Imagemap aufbauen und normal einbinden.

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

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.

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-image: url('{{file::123}}');
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            rect {
                fill: transparent;
                cursor: pointer;
                transition: fill 0.2s
            }

            svg a:focus,
            svg a:hover {
                outline: none;
            }

            svg a:focus rect,
            svg a:hover rect {
                fill: rgba(30, 222, 121, 0.25);
                cursor: pointer;
            }
        </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>
.... 


---

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

Zitat:

---

Zitat von fischmachine

- 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