Interne Verlinkung mehrerer Positionen über einem Bild

  • Joomla Version
    4
    PHP Version
    PHP 8.2.x
    Hoster
    Ions

    Eine generelle Frage, zu der ich bislang nichts finden konnte. Ich hoffe, ich drücke mich verständlich genug aus...

    Könnte man verschiedene (unsichtbare) Markierungen über ein quasi Hintergundbild legen, so dass man diese, wenn man sich auf die entsprechende Position des Bildes bewegt, als Link zu anderen (internen) Seiten nutzen kann? Oder alternativ sichtbare Markierungen über ein Bild positionieren, die dann verlinkt sein sollen?

    Das Bild soll verschiedene Stationen darstellen, die man dann entsprechend einzeln aufrufen kann...

  • Habe mir das mal angeschaut und experimentiert - so richtig will es nicht funktionieren.

    Wie auch schon mit anderen tools (z.B. per ifram / jsonbix Karte) - meine Webseiten sind nicht öffentlich (also nur für Vereins-Mitglieder nach Registrierung / log-in über eine öffentliche Seite) und so funktioniert es nicht, dass ich externe pages dann intern überhaupt verlinkt bekomme

  • Ich versuche eine Karte (oder ein Bild) einzubauen, von wo aus man dann per Link auf eine einzelne Beitragsseite gelangt. Ich hatte vor Jahren bei Jsonbix eine Karte mit Markern (jedes Jahr ein Marker an einem anderen Ort auf der Karte) erstellt und diesen per iframe eingebettet.

    Ich hadere jedoch mit den Verlinkungen auf diese Karte (die ja auch einem externen Server liegt), da man jedesmal auf die log-in Seite meiner HP gelangt (wie gesagt, alles nur für registrierte / angemeldete Besucher).

    Anderer Versuch war der, wie oben von Dudlhofer vorgeschlagen, image-map zu nutzen, ich kann da auch entsprechende Flächen über einem Bild erstellen, aber das Einbinden gelingt mir nicht...

    anders beschrieben:

    Nun ist ein user eingeloggt, wie kann ich einzelne Seiten über Links auf einer Gesamtdarstellung von Events verlinken, ohne dass er erneut zunächst auf die Basis-log-in Seite verwiesen wird?

  • oder kann man beispielsweise auf einer Seite Text an verschiedenen Stellen über ein Hintergrundbild positionieren und diese Texteinträge quasi als Menüpunkte eines versteckten Menüs zur Verlinkung auf andere Beitragsseiten nutzen?

  • Ich habe gerade bei image-map.net ein Bild generiert. Ich habe das Joomla Logo dafür genommen und 2 Bereiche markiert (die zwei Kreise oben). Ich habe den Code kopiert, in einem Beitrag auf meiner Seite eingefügt und ein bisschen angepasst: zuerst muss das Bild eingefügt werden, im Code Modus ergänzt man dann usemap="#image-map" . Die Links sind Blogartikel auf meiner Seite

    Code
    <img src="images/joomla-favicon.png" loading="lazy" width="512" height="512" alt="" data-path="local-images:/joomla-favicon.png" usemap="#image-map" />
    <map name="image-map"> 
    <area target="" alt="Blog 1" title="Blog 1" href="blog/autor-seite-fuer-joomla-4" coords="147,138,3,3" shape="rect" />
     
    <area target="" alt="Blog 2" title="Blog 2" href="blog/offcanvas-menue-fuer-cassiopeia" coords="507,127,377,4" shape="rect" />
     </map>

    Hier das Ergebnis: https://www.dr-menzel-it.de/test

    Wäre meine Seite nur für eingeloggte Benutzer, würde ich zuerst natürlich auf der Login Seite landen. Wenn ich eingeloggt bin und das Bild sehen kann, dann funktionieren die Links problemlos ...

  • Ich habe gerade bei image-map.net ein Bild generiert. Ich habe das Joomla Logo dafür genommen und 2 Bereiche markiert (die zwei Kreise oben). Ich habe den Code kopiert, in einem Beitrag auf meiner Seite eingefügt und ein bisschen angepasst: zuerst muss das Bild eingefügt werden, im Code Modus ergänzt man dann usemap="#image-map" . Die Links sind Blogartikel auf meiner Seite

    Code
    <img src="images/joomla-favicon.png" loading="lazy" width="512" height="512" alt="" data-path="local-images:/joomla-favicon.png" usemap="#image-map" />
    <map name="image-map"> 
    <area target="" alt="Blog 1" title="Blog 1" href="blog/autor-seite-fuer-joomla-4" coords="147,138,3,3" shape="rect" />
     
    <area target="" alt="Blog 2" title="Blog 2" href="blog/offcanvas-menue-fuer-cassiopeia" coords="507,127,377,4" shape="rect" />
     </map>

    Hier das Ergebnis: https://www.dr-menzel-it.de/test

    Wäre meine Seite nur für eingeloggte Benutzer, würde ich zuerst natürlich auf der Login Seite landen. Wenn ich eingeloggt bin und das Bild sehen kann, dann funktionieren die Links problemlos ...

    drmenzelit Danke für die ausführliche Erläuterung, so auch zunächst die Einbindung des Bildes in den entsprechenden Beitrag. Ich habe das nun testweise hinbekommen und es funktioniert auch nach Anmeldung im registrierten user-Bereich. In diesem Zusammenhang fiel mir auf, dass es nur mit der vollen https://- Linkangabe funktioniert; versuchsweise habe ich es mit "index.php?Itemid=xxx" probiert, hier kommt aber dann "404-Komponente" nicht gefunden...

    ist das immer so, daß man den vollen https:// Link angeben muss?

    Aber nochmals Danke! Werde die andere extention Empfehlung auch noch ausprobieren!

  • Hatte nun beide Versionen in einem ersten Setup für wenige Marker am Laufe... funktioniert also im Prinzip.

    - hierzu noch eine generelle Frage, wenn ich die site umziehe, z.B. von der lokalen Testumgebung (MAMP pro) auf den hoster (akeeba, bzw. umgekehrt) oder auch von der sub-domain auf die Hauptdomain (durch Zuweisung des entsprechenden Ordners beim Hoster) - muss ich die links dann für die finale Version alle manuell wieder anpassen?

    Meine bisherige Erkenntnis:

    Live site: Nach Zuweisung des subdomain-ordners als site Zielverzeichnis funktionieren zwar die links (allerdings steht in der https:// zeile immer noch die subdomain - hierzu habe ich einen anderen post aufgemacht #post155044)

    Test-site: - nach Umzug per akeeba auf meine lokale Testumgebung werde ich bei den links von image-hotspot wieder auf die login-Seite verwiesen zum neu einloggen; bei den links von image-map funktioniert es... (bin noch nicht dazu gekommen, die links selbst zu vergleichen; vielleicht habe ich hier unterschiedliche links (link auf menüitem bzw. link auf beitrag?) hinterlegt...

    werde (wenn zeit) weiter herumknobeln, der Weg ist ja schon mal richtig...

  • @all, besten Dank für die vielen Hinweise und Empfehlungen.

    Ich habe nun auf dem Live-Server eine neue Datenbank angelegt und die Seiten aus meiner Testumgebung dorthin per akeeba transferiert - nun läuft alles (soweit ich sehen kann) wie es sein soll; auch die relativen Verlinkungen.

    Das vorherige Problem mit Anführen der subdomain in der Adresszeile habe ich nicht lösen können (bzw. nicht verstanden), vielleicht habe ich bei der Zuweisung etwas falsch gemacht. Sowie ich verstanden hatte, brauchte ich beim Hoster der Hauptdomain nur das entsprechende Verzeichnis zuordnen...

    (dieser Post hier war ja schon geschlossen, wenn noch etwas ist, mache ich nen Neuen auf)

    Danke nochmal!

  • Bei image-map.net muss man schon mit dem Bild in der richtigen Größe arbeiten. Automatisch werden sich die Koordinaten nicht anpassen

    Gibt es hierfür kein "Re-size"?

    D.h., dass das Original-Image inkl. der Map-Koordinaten verkleinert wird, falls das Bild auf der Webseite kleiner angezeigt wird?

    Kann das ein anderer "Mapper" vielleicht?hmm


    Danke<3

  • Zitat

    D.h., dass das Original-Image inkl. der Map-Koordinaten verkleinert wird, falls das Bild auf der Webseite kleiner angezeigt wird?

    Es gibt responsive image maps (suchmaschine deiner wahl).

    Aber es gibt einen guten Grund, warum image-maps nicht mehr so häufig anzutreffen sind.
    Auf vielen Karten müsste man schon Feenfinger haben, um die areas noch anzusteuern.
    Bei kleinen Screens werden dann die Areas am besten als menüpunkte gezeigt.

  • Aber es gibt einen guten Grund, warum image-maps nicht mehr so häufig anzutreffen sind.
    Auf vielen Karten müsste man schon Feenfinger haben, um die areas noch anzusteuern.
    Bei kleinen Screens werden dann die Areas am besten als menüpunkte gezeigt.

    Das ist natürlich ein sehr gutes Argument.

    Hatte jetzt 3h mit der image map online "rumghespielt", um dann festzustellen, dass meine 40 Links auf der Seite nicht da sind, wo sie hingehören :rolleyes: