Positionen in einem Bild markieren und statisch anzeigen

Webhufi

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

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

Webhufi

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

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

Danke für deine Kommunikation!

Viele Grüße

Norbert
 

Webhufi

Erfahrenes Mitglied
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?
 

Neue Beiträge