# Positionen in einem Bild markieren und statisch anzeigen



## Webhufi (8. März 2019)

Hallo,

ich habe ein Script gefunden, das in einem Bild bestimmte Stellen mit Kreisen markiert und beim Zeigen auf einen Kreis ein Foto und/oder einen Text anzeigt. Schaut bitte hier.
Ungeschickterweise sind diese Kreise nicht stationär, was heißt, dass sie beim Verkleinern des Browserfensters ihre Positionen verändern; die Page ist responsive.

Leider kann ich den Autor dieses Scripts nicht fragen...

Hat jemand eine Idee, wie ich die Kreise dazu zwingen kann, an genau der Stelle zu bleiben? Und vielleicht auch, dass sich diese Kreise in der Größe anpassen, ohne dass sie auf einem mobilen Gerät zu groß werden?

Das wäre ein klasse Hilfe!

Vielen Dank schon mal für das Interesse an meinem Problem...

Gute Zeit und viele Grüße

Norbert
___________________

<style>
.HotSpotWrapper {
    display: block;
    position: relative;
    overflow: visible;
}
.HotSpotWrapper .HotSpot {
    position: absolute;
    display: block;
    overflow: visible;
}
.bullet {
    width: 2.7%;
    height: 4%;
    background-color: rgba(255, 255, 0, 0.4);
    border-color: #cc0033;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
}
.HotSpot p {
    position: absolute; 
    top: -50px;
    left: 0px;
    text-align: center;
    color: #ffffff;
    background: rgba(0, 102, 0, 0.9);
    border-color: #fff;
    border-width: 1px;
    border-style: solid;
    width: 150px;
    padding: 5px;
    margin: auto;
    font-size:.8em;
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.0);
    z-index: 99999;
    transition: all 0.2s linear;
}
.HotSpot:hover p {
    opacity: 1.0;
    transform: scale(1.0);
}
.HotSpot a {
    text-decoration: none;
    color: #006600;
    font-size:1.0em;
    background-color: #fff;
    padding: 2px 6px;
    border: 1px solid #fff;
    border-radius: 3px;
}
.HotSpot span {
    color: #fff;
    font-size:1.2em;
    font-weight: 800;
    background-color: #006600;
}
</style>


----------



## Sempervivum (8. März 2019)

Das ist möglich, wenn man bei den Positionsangaben konsequent mit Prozentangaben arbeitet. Ich habe so etwas mal vor einiger Zeit gemacht:
Test

BTW: Die Begeisterung für Hover-Effekte ist ungebrochen, aber bedenke, dass sehr viele Surfer mit Touchgeräten unterwegs sind und dort funktioniert Hover nicht.


----------



## Webhufi (9. März 2019)

Ich habe das so gemacht:

<!-- HBF -->    
        <div class="HotSpot bullet" style="top: 34.4%; left: 14.8%;">
            <p><span>Hauptbahnhof mit Pylon</span><img src="oid://image/pylon_hbf28" alt=""></p>
        </div>

Und trotzdem verschwindet der Kringel nach links.

Hover:
Du meinst, es ist besser, das Bild direkt in einem neuen Fenster zu zeigen? Hätte auch den Vorteil, dass es nicht aus dem Monitor verschwindet... ;-)


----------



## Sempervivum (9. März 2019)

Diese Prozentangaben beziehen sich jeweils auf die Abmessungen des Elternelementes, d. h. .HotSpotWrapper. Leider stimmt die Größe des Bildes nicht mit der Größe dieses Containers überein; die Position der Hotspots ist daher im Elterncontainer fest, aber verschiebt sich auf dem Bild. Lass das Bild sich an die Größe des Containers anpassen und es funktioniert:

```
.HotSpotWrapper img {
    width: 100%;
}
```

Was das Hover betrifft: In deinem Fall hast Du es noch relativ leicht, weil Du offenbar nur den Hinweistext anzeigen willst. Dann könntest Du das einfach tun, wenn man den Hotspot berührt. Schwieriger wird es, wenn zusätzlich noch ein Link darauf liegt.


----------



## Webhufi (9. März 2019)

Ha, das ist klasse!!! Danke!

Auch die Erklärung dazu habe ich verstanden ;-)

In diesen Hotspots werden nicht nur Texte, sondern auch Bilder gezeigt; und die verschwinden halt nach außen auf kleinen Monis.
Nein, falsch! Eben sehe ich (auch wenn ich kein solch kleines Gerät habe): Wenn ich das Fenster so weit wie möglich verkleinere, ist rechts immer noch Platz für die Hover-Bilder! Jedenfalls bis zu einer bestimmten "Kleinheit" des Screens... Auf einem Handy z.B. kann ich das nicht testen.

Diese Touchdinger muss ich dabei wohl außen vorlassen, oder?


----------



## Sempervivum (9. März 2019)

Würde ich nicht empfehlen, sie außen vor zu lassen, denn man liest, dass es schon mehr als die Hälfte der Besucher sind. Es gibt bestimmt eine Lösung, am ehesten in Form eines Modals bzw. Popups, das das Bild enthält und den übrigen Inhalt überdeckt.


----------



## Webhufi (9. März 2019)

Nun denn: Dann warten wir halt auf eine solche Lösung...  ;-)

Danke für deine Kommunikation!

Viele Grüße

Norbert


----------



## Sempervivum (9. März 2019)

Warum warten, einfach Fancybox 3 verwenden und damit die Bilder anzeigen. Unterstützt selbstverständlich auch Beschreibungstexte.
fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script


----------



## Webhufi (9. März 2019)

So geht es natürlich auch...


----------



## Webhufi (10. März 2019)

Mist. Es klappt überhaupt nix!

In den Kringeln sollte ein´Text angezeigt werden (innerhalb sogar eines kleinen Handys oder so).
Dieser Text sollte ein Link enthalten zu einem Bild, egal, wo es gelagert wird.

Utopie?


----------



## Sempervivum (11. März 2019)

Wahrscheinlich keine Utopie, allerdings weiß ich nicht genau, was Du dir vorstellst. Bei Touch/Klick erscheint zunächst der Text mit dem Link darin; klickt/berührt man den Link wird das Bild angezeigt?
Hier hat man etwas ähnliches mit Tooltipster gemacht:
Nachrichtentisch Region SCHLESWIG-HOLSTEIN
Klicke einen Listenpunkt.


----------



## Webhufi (11. März 2019)

Hm... Ich habe jetzt eine Menge probiert und ich muss sagen, dass mir der Ursprung doch sehr gut gefällt! Jedenfalls auf meinem großen Moni.

Jedoch:

1. rutschen die Bilder aus dem Monitor raus beim Verkleinern (z.B. oben rechts), wie auch die Texte; ich kann die Positionen einfach nicht verändern, so dass alles z.B. auf einem Handy innerhalb des Displays bleibt.
Es müssen übrigens noch mehr Bilder rein...

2. Wie du schon angemerkt hast, fehlt eine Touch-Funktion.

Meinst du, dass meine Vorstellungen realisierbar sind?


----------



## Sempervivum (11. März 2019)

> rutschen die Bilder aus dem Monitor raus beim Verkleinern (z.B. oben rechts)


Kann ich nicht reproduzieren, ich beobachte nur, dass die Bilder nach oben oder unten sich aus dem Fenster heraus bewegen, weil sich ihre Größe ändert - was unvermeidbar ist, wenn sie sich responsiv verhalten sollen. Das Kleiner- und Größerziehen macht man zwar beim Test häufig, für einen normalen Besucher ist es jedoch weniger relevant, weil dieser nicht dauernd die Größe ändert.


----------



## Webhufi (11. März 2019)

Du meinst also, dass ich das durchaus so lassen kann? Auch für mobile Geräte?


----------



## Sempervivum (11. März 2019)

> Du meinst also, dass ich das durchaus so lassen kann? Auch für mobile Geräte?


Nicht vollständig:

Ich habe mich jetzt ein wenig weiter auf der Ballonfahrer-Seite umgesehen und folgendes ist mir aufgefallen:

Wie ich sehe, benutzt Du schon Fancybox, aber nicht die aktuelle Version 3. Die ältere hat den Nachteil, dass sie nicht touchready ist: Navigieren in der Galerie durch Wischen funktioniert nicht und die Pfeiltasten sind auch nicht sichtbar, weil sie offenbar durch Hover eingeblendet werden. Ich empfehle dringend, auf die Version 3 umzustellen.

Wenn ich mir die Seite auf meinem Handy ansehe (Samsung S4) erkenne ich auch, was Du gemeint hast, als Du schriebst, die Bilder fallen rechts heraus. Es sind die kleinen Popups, die erscheinen, wenn man auf die Hotspots tippt. Das geht so natürlich nicht. Warum nicht einfach auch hier Fancybox verwenden, dann werden die Popups automatisch zentriert und alles ist sichtbar?


----------



## Webhufi (12. März 2019)

Den Vorschlag mit Fancybox 3 habe ich an die Ersteller des CMS vorgeschlagen; danke!

Um ehrlich zu sein: Ich habe keine Ahnung, wie ich die Fancybox aufrufen soll, um die Bilder anzuzeigen... Und was mache ich mit den Texten?


----------



## Sempervivum (12. März 2019)

Welchen Code Du brauchst, kann ich dir sagen, aber ich weiß nicht genau, inwieweit Du bei deinem CMS Zugriff auf das HTML und das Javascript hast?
Dieses funktioniert bei mir, nachdem ich deine Seite heruntergeladen habe:

```
<!-- <div class="HotSpot bullet" style="top: 14.4%; left: 90.0%;">
                                            <p><span>Froschlache<span><img
                                                            src="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg"
                                                            alt=""> </span></span></p>
                                            <p> </p>
                                        </div> -->
                                        <a class="HotSpot bullet fancybox-custom" style="top: 14.4%; left: 90.0%;"
                                            title="Froschlache"
                                            href="Hufnagel-Ludwigshafen-Dateien/froschlache-30009.jpg">
                                        </a>
```
Das auskommentierte ist das, was momentan vorhanden ist und darunter der Code, den Du für Fancybox brauchst. Wie Du siehst,  steht der Text im title-Attribut.
Und das JS ganz unten im Body, vor dem schließenden `</body>` 

```
<script>
        $(".fancybox-custom").fancybox();
    </script>
</body>
```
Sieht dann so aus:


Das Schließen-Kreuz passt nicht ganz, aber das liegt u. U. an meiner Testumgebung.


----------



## Webhufi (13. März 2019)

Das ist richtig klasse! *hüpf

Das Bild ist nicht mehr so überladen durch diesen jetzigen kleinen Hinweistext, und ich kann größere Bilder einfügen, die auf großen Monitoren natürlich wesentlich besser wirken.

Einzig: Der Text, der bei dir in der Fancybox so nett aussieht, ist unsichtbar, wie auch das Schließen-X... (Das übrigens von der Lage her völlig unwichtig ist).

Und (ich bin jetzt echt gierig! *gg): Kann ich den Text "Froschlache" durch einen Zeilenumbruch erweitern und sogar einen Link einfügen?

Schau nochmal bitte hier rechts oben auf die Froschlache.

Ich hoffe sehr, dass dir meine Wünsche nicht zu sehr Arbeit machen!

Viele freudige Grüße

Norbert


----------



## Sempervivum (13. März 2019)

Da ist leider die Fancybox gar nicht wirksam, sondern der Link wirkt ganz normal und öffnet das Bild, wobei die Seite verlassen wird.
Du hast zwar das Javascript eingefügt, aber am Ende des Head; dort sind die Elemente noch nicht definiert und der Aufruf führt ins Leere. Du musst das Javascript an das Ende des Body stellen, am besten vor Zeile 872, d. h. vor dem schließenden </body>.
Das mit dem Zeilenumbruch sehe ich mir noch an ...


----------



## Sempervivum (13. März 2019)

... das war ziemlich schnell offensichtlich: Die runden Ränder um den Beschreibungstext sind leider nicht mit CSS realisiert, sondern mit Hintergrundgrafiken. Daher ist es nicht ohne weiteres möglich, den Text umzubrechen, weil sich dann die Ränder nicht anpassen.


----------



## Sempervivum (13. März 2019)

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 (14. März 2019)

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 (14. März 2019)

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 (14. März 2019)

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 (14. März 2019)

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


----------



## Webhufi (15. März 2019)

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 (15. März 2019)

> 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 (15. März 2019)

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 (15. März 2019)

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 (16. März 2019)

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


----------

