basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>