Positionen in einem Bild markieren und statisch anzeigen


#1
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

Erfahrenes Mitglied
#2
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.
 
#3
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

Erfahrenes Mitglied
#4
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:
CSS:
.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.
 
#5
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?
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#6
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.
 
#10
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?
 
#12
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

Erfahrenes Mitglied
#13
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.
 

Sempervivum

Erfahrenes Mitglied
#15
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?
 
#16
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

Erfahrenes Mitglied
#17
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:
HTML:
                                        <!-- <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>
Code:
    <script>
        $(".fancybox-custom").fancybox();
    </script>
</body>
Sieht dann so aus:
fancybox-froschlache.png
Das Schließen-Kreuz passt nicht ganz, aber das liegt u. U. an meiner Testumgebung.
 
#18
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

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

Erfahrenes Mitglied
#20
... 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.