Zeigt wie man auf Bilder Markierungen setzen kann und beim Hovern ein Tooltip angezeigt bekommt. Das Script funktioniert ohne JS und ist responsive
Code
<html lang="de" class="desktop mbr-site-loaded" data-lt-installed="true" style=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Hotspot</title>
<style>
body {
font-family: Muli;
}
.cid-r2dgO3mSMQ {
padding-top: 75px;
padding-bottom: 90px;
background-color: #fafafa;
}
@media (min-width: 992px) {
.cid-r2dgO3mSMQ .mbr-figure {
padding-right: 4rem;
}
}
@media (max-width: 992px) {
.cid-r2dgO3mSMQ .mbr-figure {
padding-bottom: 1rem;
}
}
.cid-r2dgO3mSMQ .mbr-text {
color: #000000;
letter-spacing: 0.03em;
}
.cid-r2dgO3mSMQ 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);
}
.cid-r2dgO3mSMQ blockquote .notch {
position: absolute;
padding: 0;
width: 0;
height: 0;
}
.cid-r2dgO3mSMQ 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;
}
.cid-r2dgO3mSMQ 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);
}
.cid-r2dgO3mSMQ 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;
}
.cid-r2dgO3mSMQ 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;
}
.cid-r2dgO3mSMQ img {
display: block;
border-radius: 20px;
width: 100%;
}
.cid-r2dgO3mSMQ .hotspot-demo-1-left {
position: relative;
width: 100%;
}
.cid-r2dgO3mSMQ .spots {
position: absolute;
color: #fff;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cid-r2dgO3mSMQ .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;
}
.cid-r2dgO3mSMQ .spot:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cid-r2dgO3mSMQ #spot-01,
.cid-r2dgO3mSMQ #spot-02,
.cid-r2dgO3mSMQ #spot-03 {
display: inline-block;
min-width: 100px;
}
.cid-r2dgO3mSMQ #spot-01 {
position: absolute;
top: 10%;
left: 40%;
}
.cid-r2dgO3mSMQ #spot-01:hover > blockquote {
display: block;
top: -26px;
left: -98%;
}
.cid-r2dgO3mSMQ #spot-02 {
position: absolute;
top: 35%;
left: 57%;
}
.cid-r2dgO3mSMQ #spot-02:hover > blockquote {
display: block;
top: 25px;
left: -35%;
}
.cid-r2dgO3mSMQ #spot-03 {
position: absolute;
top: 60%;
left: 28%;
}
.cid-r2dgO3mSMQ #spot-03:hover > blockquote {
display: block;
top: -26px;
left: 25px;
}
.cid-r2dq8GST1A {
padding-top: 60px;
padding-bottom: 0px;
background-color: #bbbbbb;
}
.cid-r2dq8GST1A .mbr-text {
color: #000000;
}
.cid-r2dq8GST1A .inner-container {
margin: 0;
}
.cid-r2dq8GST1A .line {
background-color: #cccccc;
color: #cccccc;
height: 1px;
margin: 0 auto;
}
.cid-r2dq8GST1A .section-text {
padding: 2rem 0;
letter-spacing: 0.03em;
color: #000000;
text-align: left;
}
.cid-r2dpMP9TED {
padding-top: 90px;
padding-bottom: 90px;
background-color: #f7f7f7;
}
.cid-r2dpMP9TED .row {
justify-content: center;
}
.cid-r2dpMP9TED .text-black {
font-weight: 800;
letter-spacing: 0.1em;
}
.cid-r2dpMP9TED .btn {
margin-bottom: 2rem;
}
.cid-r2dpMP9TED .mbr-text {
color: #444;
font-weight: 600;
letter-spacing: 0.1em;
}
@media (max-width: 575px) {
.cid-r2dpMP9TED .mbr-text {
text-align: center;
margin-bottom: 2rem;
}
}
.cid-r2dpMP9TED .links {
color: #232323;
text-align: center;
}
</style>
</head>
<body>
<section class="mbr-section content6 cid-r2dgO3mSMQ" id="article4-t">
<div class="hotspot-demo-1">
<div class="hotspot-demo-1-left">
<img src="/image/mbr-900x675.jpg">
<div class="spots">
<div id="spot-01">
<a class="spot" href="https://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 style="cursor: help;" class="spot">+</a>
<blockquote>Brille
<span class="notch notch-top"></span>
</blockquote>
</div>
<div id="spot-03">
<a style="cursor: help;" class="spot">+</a>
<blockquote>Handy
<span class="notch notch-left"></span>
</blockquote>
</div>
</div>
</div>
</div>
</section>
</body></html>