Positionen in einem Bild markieren und statisch anzeigen


Sempervivum

Erfahrenes Mitglied
#21
Eine Alternative ist es, mit Inline-Content zu arbeiten:
HTML:
                                        <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>
CSS:
        .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:
fancybox-froschlache-2.png
Der große Vorteil ist, dass Du dann von Fancybox unabhängig bist und die Darstellung vollkommen frei gestalten kannst.
 
#22
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?
 

Anhänge

Sempervivum

Erfahrenes Mitglied
#23
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:
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:
Code:
                                        <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>
 
#24
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
 
#26
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:

Code:
<!-- 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

Erfahrenes Mitglied
#28
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

Erfahrenes Mitglied
#29
PPS: Wahrscheinlich meinst Du den Text, der beim Hover erscheint? Der kommt bei mir ganz normal, wenn ich dieses HTML verwende:
Code:
<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.