Frage zum Wiki-Artikel „responsive_Imagemaps“

[matta]

Liebes Selfhtml-Team,

zunächst einmal DANKE für eure Arbeit! Ich habe schon oft von Selfhtml profitiert und nun im Zuge einer Anfrage endlich auch ein DANKESCHÖN.

Ich bitte um Hilfe bei folgendem Problem: Ich möchte gern eine responsive Imagemap umsetzten und habe dazu zunächst euer Beispiel (Einbindung in HTML) genutzt. Wenn ich den Code (von <figure ...> bis </figure> auf einer normalen HTML-Seite außerhalb von WP einbinde, klappt dies super, u.z. nicht nur, wenn ich die Seite offline auf dem Rechner aufrufe, sondern auch, wenn dies online über den Pfad eines WP-Themes geschieht (vgl. Spalte 4 in beigefügtem PDF - ist zwar kein Bild, aber ich hoffe, es klappt trotzdem).

Was allerdings leider nicht funktioniert (und gerade darum geht es mir), das ist die korrekte Anzeige, wenn der Code in einem WP-Beitrag gespeichert wird. Trotz richtiger Integration des Quellcodes im Backend (Classic-Editor) verändert sich der Quellcode durch das Speichern, wie man sehen kann, wenn man auf der publizierten Seite einen Rechtsklick macht -> Entwicklerwerkzeuge -> Quelltext anzeigen (vgl. Spalte 3). Dann nämlich wird der

a) <defs>-Tag gleich nach seinem Öffnen wieder geschlossen (was eigentlich erst nach der Style-Definition geschehen sollte)

b) <svg>-Tag gleich nach dem geschlossenen </defs> seinerseits geschlossen (was erst viel weiter unten vor dem <figcaption>-Tag geschehen sollte)

c) <image>-Tag in ein <img>-Tag umgewandelt (der konsequenterweise dann auch nicht geschlossen wird)

d) <rect>-Tag sofort nach den entsprechenden Definitionen geschlossen, wobei in eurem Originalcode der schließende </rect>-tag fehlt.

Ich vermute, dass irgendeine dieser (von mir nicht zu steuernden) Abweichungen dafür verantwortlich, ist, dass die Anzeige des Imagemaps nicht klappt.

Zur Fehlerdiagnose sollte ich sagen, dass ich WP 6.1.1 und PHP 8.0.26 benutze. Am Theme dürfte der Fehler nicht liegen, denn ich habe es mit verschiedenen Themes ausprobiert. Auch alle Plugins waren natürlich zum Testen deaktiviert.

Hat vielleicht freundlicherweise jemand eine Idee, woran es liegen könnte und auch wie man es fixen könnte?

Vielen Dank und Grüße

Matta

PS: Auch bei der Umsetzung eures Quellcodes habe ich eine Veränderung bemerkt: "xlink:href" wird zu "href" verkürzt, wenn man sich den Code über "Reiter 'Vorschau' -> Rechtsklick -> Entwicklerwerkzeuge -> Framequelltext anzeigen" ansieht (Vgl. Spalte 2), doch es funktioniert glücklicherweise trotzdem.