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.

[Raketenwilli]

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

Entweder man benutzt Wordpress und kommt mit den als Widrigkeiten empfundenen Funktionen klar - oder man lässt es. Wenn man Auto fährt wundert man sich ja auch nicht, dass selbiges nicht durch die Schlafzimmertür passt. Das eine beruht darauf, dass zwei (hinten sogar drei) Personen einigermaßen bequem nebeneinander sitzen sollen, das das andere darauf, dass Wordpress, als CMS „missbraucht“ eben die Möglichkeiten der Autoren einschränkt um eine (angeblich) „bequeme und sichere Möglichkeit“ zu bieten, Webseiten mit zahlreichen Funktionen ohne HTML-Kenntnisse zu erstellen, zu pflegen und zu automatisieren.

Freilich könnte man versuchen, das Auto (oder Wordpress) umzubauen. Aber da wird nicht viel vom Original bleiben…

• Versuche mal, das SVG-Zeug als externe Grafiken anzubieten. Dann wird sich Wordpress womöglich nicht mit dem Quelltext befassen und diesen ergo (hoffentlich) auch nicht verändern.

Hinzu kommt:

• Was Du nach einem Rechtsklick auf das Dokument als Quelltext siehst wurde vom Browser womöglich schon verarbeitet. Bei einigen Browsern hilft Ansicht → Seitenquelltext weiter.

[matta]

Danke, Raketenwilli, sehr hilfreich! ("Formulieren Sie bitte höflich und wertschätzend.")

[Raketenwilli]

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

Äh, nein. Im Original-Code steht mehrfach etwas wie:

<rect x="300" y="125" opacity="0" width="250" height="300" />

Und nach allen Regeln der Kunst braucht es hier keinen “schließenden </rect>-tag“, denn der ist bereits geschlossen. (Sieh auf das Ende)

Was Mordpress (womöglich!) daraus macht ist nicht Gegenstand einer HTML-Dokumentation und wird es auch nicht, denn ein selfHTML-Wiki kann sich nicht mit den Widrigkeiten von Software Dritter befassen. Die hat dafür eigene Ressourcen (oder nicht...)

[Der Martin]

Hallo,

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

Äh, nein. Im Original-Code steht mehrfach etwas wie:

<rect x="300" y="125" opacity="0" width="250" height="300" />

Und nach allen Regeln der Kunst braucht es hier keinen “schließenden </rect>-tag“, denn der ist bereits geschlossen. (Sieh auf das Ende)

genau, das ist die XML-Kurzschreibweise für leere Elemente.

Was Mordpress (womöglich!) daraus macht ist nicht Gegenstand einer HTML-Dokumentation und wird es auch nicht, denn ein selfHTML-Wiki kann sich nicht mit den Widrigkeiten von Software Dritter befassen. Die hat dafür eigene Ressourcen (oder nicht...)

Erschwerend kommt dazu, dass es hier nicht um HTML geht, sondern um in HTML eingebettetes SVG. Ob und wie Wordpress damit umgehen kann, ist nochmal eine ganz andere Frage.

Einen schönen Tag noch
 Martin

[Matthias Scharwies]

Servus!

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.

vielen Dank für das positive Feedback!

Ich bitte um Hilfe bei folgendem Problem: Ich möchte gern eine responsive Imagemap umsetzten

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.

Ich hatte mal angefangen, Tutorials zu Wordpress zu schreiben. Dieses Kapitel ist leider nur ein stub/ Linksammlung:

• SVG/Tutorials/Einsatz_im_CMS

Das wäre sicher etwas für einen Blog-Beitrag. Ich habe aber momentan leider keine Zeit. 😟

[EDIT]

• <rect ... />hat @Der Martin schon erklärt, war aber auch im Tutorial so.
• image ist in HTML ein Synonym für img - Wordpress nimmt eingegebenes HTML-Markup und „verbessert“ es - manchmal anders als gewünscht.
• Ich habe den Wiki-Artikel aktualisiert.
  • xlink:href war früher üblich, mittlerweile verstehen alle Brwoser das „normale“ href-Attribut.
  • im Fazit gibt es einen Link zu SVG/Tutorials/Einsatz_im_CMS

[/EDIT]

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

xlink:href war früher üblich, mittlerweile verstehen alle Brwoser das „normale“ href-Attribut.

Da war doch mal was mit Safari? Nun ja, es war einmal. Test

TIL: Das href-Attribut aus dem XLink-Namensraum ist in SVG 2 deprecated. [SVG2 §16.1.6]

🖖 Живіть довго і процвітайте