Hotspots

Responsive Hotspots in Mobirise einbauen

+
Tutorials
+
Brille
+
Handy



Responsive Hotspots

Gehe mit der Maus über die roten Kreise mit dem weißen Kreuz für Hinweise.

Der obere Kreis verlinkt gleichzeitig auf meine Startseite Tutorials.

Anleitung gefunden auf jimfrenette.com

In diesem Beispiel habe ich einen Block mit Bild und Text von Mobirise aufgezogen und das ursprüngliche Bild mit dem HTML-Code und der CSS unten ersetzt.

Am Screenshot unten ein weiteres Hotspot-Beispiel.

Dieses Beispiel benötigt kein JavaScript sondern nur CSS.

Guckt Euch auch diese Tutorial-Seite als anderes Beispiel an.



Hier zur Info mein HTML-Code für das Bild:

<!-- Beginn Hotspot Bild -->
<div class="hotspot-demo-1">
    <div class="hotspot-demo-1-left">
        <img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/mbr-900x675.jpg">
        <div class="spots">
            <div id="spot-01">
                <a class="spot" href="http://www.mobirise-tutorials.com/" target="_blank">+</a>
                <blockquote>
                    <span class="mbri-link mbr-iconfont mbr-iconfont-btn"></span> Tutorials
                    <span class="notch notch-right"></span>
                </blockquote>
            </div>
            <div id="spot-02">
                <a class="spot">+</a>
                <blockquote>Brille
                    <span class="notch notch-top"></span>
                </blockquote>
            </div>
            <div id="spot-03">
                <a class="spot">+</a>
                <blockquote>Handy
                    <span class="notch notch-left"></span>
                </blockquote>
            </div>
        </div>
    </div>
</div>
<!-- Ende Hotspot Bild -->


Hier meine CSS:

blockquote {
  position: relative;
  display: none;
  *border: 1px solid #fafafa;
  border-color: transparent;
  border-radius: 8px;
  padding: 8px;
  margin: 20px;
  text-align: center;
  line-height: 1.5em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
}
blockquote .notch {
  position: absolute;
  padding: 0;
  width: 0;
  height: 0;
}
blockquote .notch-top {
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-top: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, 0.7);
  border-left: 10px solid transparent;
}
blockquote .notch-right {
  top: 50%;
  right: -10px;
  margin-top: -10px;
  border-top: 10px solid transparent;
  border-right: 0;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.7);
}
blockquote .notch-bottom {
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  border-top: 10px solid rgba(0, 0, 0, 0.7);
  border-right: 10px solid transparent;
  border-bottom: 0;
  border-left: 10px solid transparent;
}
blockquote .notch-left {
  top: 50%;
  left: -13px;
  margin-top: -10px;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.7);
  border-bottom: 10px solid transparent;
  border-left: 0;
}
img {
  display: block;
  border-radius: 20px;
  width: 100%;
}
.hotspot-demo-1-left {
  position: relative;
  width: 100%;
}
.spots {
  position: absolute;
  color: #fff;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.spot {
  position: absolute;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
  *font-weight: bold;
  color: #fff;
  width: 32px;
  height: 32px;
  border: 2px solid red;
  border-radius: 16px;
  background-color: transparent;
}
.spot:hover {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#spot-01, #spot-02, #spot-03 {
  display: inline-block;
  min-width: 100px;
}
#spot-01 {
  position: absolute;
  top: 10%;
  left: 40%;
}
#spot-01:hover > blockquote {
  display: block;
  top: -26px;
  left: -98%;
}
#spot-02 {
  position: absolute;
  top: 35%;
  left: 57%;
}
#spot-02:hover > blockquote {
  display: block;
  top: 25px;
  left: -35%;
}
#spot-03 {
  position: absolute;
  top: 60%;
  left: 28%;
}
#spot-03:hover > blockquote {
  display: block;
  top: -26px;
  left: 25px;
}

Code
+
HTML Editor
+
CSS Editor
+
Beginn eigener Code
+
Ende eigener Code