Positionen in einem Bild markieren und statisch anzeigen

[Webhufi]

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]

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]

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]

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]

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]

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]

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

Danke für deine Kommunikation!

Viele Grüße

Norbert

 

[Sempervivum]

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]

So geht es natürlich auch...

 

[Webhufi]

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?