Positionen in einem Bild markieren und statisch anzeigen

[Sempervivum]

Eine Alternative ist es, mit Inline-Content zu arbeiten:

                                        <div class="wrapper-fb-content">
                                            <figure class="fb-figure" id="froschlache-fb">
                                                <img src="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg">
                                                <figcaption>Frosch-<br>lache</figcaption>
                                            </figure>
                                        </div>
                                        <a class="HotSpot bullet fancybox-custom" style="top: 14.4%; left: 90.0%;"
                                            href="#froschlache-fb">
                                        </a>

        .wrapper-fb-content {
            display: none;
        }

        .fb-figure img {
            width: 100%;
        }

        .fb-figure figcaption {
            text-align: center;
            background-color: white;
            color: black;
        }

Sieht dann so aus:

Der große Vorteil ist, dass Du dann von Fancybox unabhängig bist und die Darstellung vollkommen frei gestalten kannst.

 

[Webhufi]

Ich habe im CMS keinen Zugriff auf das komplette HTML. Einfügungen können nur über 'Boxen' erfolgen, weshalb ich keine bestimmte Stelle im Quelltext auswählen kann.

Deine neuen Codes habe ich wie in den Bildern dargestellt eingefügt; jetzt geht gar nichts mehr, wenn ich auf den Kringel 'Froschlache' zeige.

Ich bin ziemlich geknickt: Was habe ich falsch gemacht?

 

[Sempervivum]

Häufiger Fehler, der mir aber auch hin und wieder passiert: Das Javascript steht vor der Definition der HTML-Elemente, es muss jedoch dahinter stehen. Du schreibst: "weshalb ich keine bestimmte Stelle im Quelltext auswählen kann. ". Wenn das so ist, dann verwende diesen Code:

        $(document).ready(function () {
            $(".fancybox-custom").fancybox();
        });

Damit wird das innere Javascript erst aufgerufen, wenn alle HTML-Elemente fertig angelegt sind.

BTW: Wie ich schon schrieb, kannst Du die Box bei Inlinecontent beliebig formatieren; in diesem Fall würde es sich anbieten, eine Überschrift zu verwenden:

                                        <div class="wrapper-fb-content">
                                            <figure class="fb-figure" id="froschlache-fb">
                                                <img src="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg">
                                                <figcaption>
                                                    <h4>Froschlache</h4>
                                                    Über die dortigen Weiher gibt es einen
                                                    gesonderten Artikel im Bereich 'Natur'
                                                </figcaption>
                                            </figure>
                                        </div>

 

[Webhufi]

Du bist schon eine Granate, 'Immerlebender'!

Danke, ich werde das morgen probieren.
Ach ja: Wo soll ich den ersten Code genau im HTML einfügen?
Beim zweiten werde ich wohl zurecht kommen...

Und: Durch deine Erklärungen lerne ich! Eine sehr positive Art, einem Dummen die Welt zu zeigen...

Viele Grüße
Norbert

 

[Sempervivum]

Wenn Du den ersten Code verwendest, ist es nicht so wichtig. Mit dem document-ready ist er im Head gut aufgehoben.

 

[Webhufi]

Ich weiß, ich nerve manchmal...

Das klappt jetzt soweit, nur dass
1. das Bild jetzt nicht mehr responsive ist (wobei ich aber damit leben könnte)
2. der Text immer noch in dem Kringel fehlt

Ich habe folgendes probiert, aber es steckt wohl ein Fehler drin:

<!-- Froschlache -->
<a class="HotSpot bullet fancybox-custom" style="top: 14.4%; left: 90.0%;"><p><span>Froschlache</span></p> </a> <a href="#froschlache-fb"> </a>
<div class="wrapper-fb-content">                                          <figure class="fb-figure" id="froschlache-fb">
  <img src="oid://image/froschlache-p1030009">
<figcaption><h4>Froschlache</h4>
Über die dortigen Weiher gibt es einen gesonderten Artikel im Bereich 'Natur'</figcaption>
 </figure>
</div>

 

[Sempervivum]

1. das Bild jetzt nicht mehr responsive ist (wobei ich aber damit leben könnte)

Das ist die Konsequenz davon, dass dieses CMS das veraltete Fancybox 2 verwendet.

2. der Text immer noch in dem Kringel fehlt

Verstehe nicht, dieser rote Kringel ist doch viel zu klein, um einen Text darin unterzubringen?

 

[Sempervivum]

PS: 1. muss ich etwas einschränken: Das Bild ist schon responsiv, aber die Größe wird nur beim Öffnen eingestellt, jedoch nicht wenn man später die Fenstergröße verändert. Letzteres macht man zwar häufig beim Testen, aber ein normaler Besucher eher seltener.

 

[Sempervivum]

PPS: Wahrscheinlich meinst Du den Text, der beim Hover erscheint? Der kommt bei mir ganz normal, wenn ich dieses HTML verwende:

<a class="HotSpot bullet fancybox-custom" style="top: 14.4%; left: 90.0%;" href="#froschlache-fb">
    <p><span>Froschlache</span></p>
</a>

d. h. genau so, wie bei den anderen Hotspots. Das Problem bei dir ist wahrscheinlich, dass Du in zweites a-Tag dahinter notiert hast, lasse das mal weg, dann sollte es funktionieren.
Dieses Textfeld ist dann klicksensitiv und wenn man draufklickt öffnet sich die Fancybox.

 

[Webhufi]

Ganz herzlichen und lieben Dank für deine tollen Hilfen!

Jetzt brauche ich einige Zeit, um meine Page anzupassen.

Ich wünsche dir allzeit eine gute Zeit,

Norbert