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