Ga naar de inhoud
Home » Kennisbank » Wordpress » Hotspot afbeelding maken met HTML en CSS

Hotspot afbeelding maken met HTML en CSS

Hotspot / Interactieve Afbeelding

Een hotspot afbeelding is een afbeelding met interactieve gebieden, de zogenaamde hotspots. De hotspots reageren wanneer gebruikers erop klikken of tikken. Deze interactieve elementen leiden naar, of tonen, aanvullende inhoud zoals webpagina’s, beschrijvingen of video’s. Een normale afbeelding kan alleen passief bekeken worden. Door de interactieve elementen van de hotspot worden gebruikers actief betrokken bij de inhoud. Het is dus een eenvoudige manier om de interesse te stimuleren. Daarnaast bieden hotspots een handige manier om uitgebreide informatie over te brengen. De afbeelding is het startpunt waarvandaan gebruikers eenvoudig naar gerelateerde inhoud kunnen navigeren. Bovendien zijn interactieve beelden vaak visueel aantrekkelijker en beter te onthouden dan statische afbeeldingen. Wij gebruiken zelf ook een hotspot afbeelding, we doen dit om ons werkgebied te tonen. Zo kunnen bezoekers op de provincies klikken waarna de beschikbaarheid getoond wordt. In dit artikel geven we je de HTML & CSS en de uitleg waarmee jij ook eenvoudig je eigen hotspot afbeelding kan maken.

Hotspot afbeelding in CSS en HTML

De hotspot afbeelding die je hiernaast ziet, gebruiken we om op een interactieve manier ons werkgebied aan de bezoekers te tonen. We maken gebruik van Bootstrap CSS als basis. Op de afbeelding plaatsen we selectievakjes (checkboxes) die, wanneer aangeklikt, de gewenste inhoud tonen. Op deze manier kun je eenvoudig een hotspot afbeelding maken met alleen CSS en HTML, zonder dat er veel technische kennis vereist is. Hoewel je de functionaliteiten kunt uitbreiden met Javascript, houden we het in dit geval eenvoudig. We passen de selectievakjes aan met CSS en positioneren ze door hen relatief aan de afbeelding een bepaalde marge van links/rechts en boven/onder te geven. De HTML en CSS kunnen uiteraard nog verder geoptimaliseerd worden, echter biedt de code een goede basis en kan deze direct gebruikt worden.

Adres en Werkgebied Marketing Digitaal

Groningen

Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!

Drenthe

Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!

Friesland

Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!

Overijssel

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Overijssel en kunnen je op afstand helpen met al jouw vraagstukken.

Flevoland

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Flevoland en kunnen je op afstand helpen met al je vraagstukken.

Noord-Holland

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Noord-Holland en kunnen je op afstand helpen met al je vraagstukken.

Utrecht

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Utrecht en kunnen je op afstand helpen met al jouw vraagstukken

Gelderland

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Gelderland en kunnen je op afstand helpen met al jouw vraagstukken

Zuid-Holland

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Zuid-Holland en kunnen je op afstand helpen met al jouw vraagstukken

Noord-Brabant

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Noord-Brabant en kunnen je op afstand helpen met al jouw vraagstukken

Limburg

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Limburg en kunnen je op afstand helpen met al jouw vraagstukken

Zeeland

Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Zeeland en kunnen je op afstand helpen met al jouw vraagstukken

CSS
.MD_Wrapper {position: relative;width: 350px;}
.MD_Wrapper .Content_Wrapper {position: relative;}
.MD_Wrapper .MD_Close {display: none;}
.MD_Wrapper .MD_Modal_Content {background: #EDF3F7;border-radius: 5px;border: 1px solid #011B2A;box-shadow: 0px 0px 4px 2px #33B249;color: #011B2A;opacity: 0;position: absolute;transition: all 0.3s ease-in-out;visibility: hidden;width: 208px;z-index: 4;}
.MD_Wrapper .MD_Modal_Content .Content_Wrapper {padding: 0px;}
.MD_Wrapper .MD_Modal_Content .Content_Wrapper .MD_Title {font-size: 17px;font-family: "Poppins";font-weight: 800;text-transform: uppercase;text-align: center;margin-top: 6px;letter-spacing: -0.2px}
.MD_Wrapper .MD_Modal_Content .Content_Wrapper p {font-size: 12px;font-family: "Poppins";text-align:center;margin: 0;padding: 0px 8px 8px 8px;margin-block-start: 0px;margin-block-end: 0px;line-height: 1.2em;}
.MD_Wrapper .MD_Input {height: 0;opacity: 0;overflow: hidden;position: absolute;text-indent: -9999px;width: 0;z-index: -1;}
.MD_Wrapper .MD_Input + .MD_Label {background: #33B249;border-radius: 50%;cursor: pointer;height: 16px;position: absolute;transition: all 300ms ease;width: 16px;z-index: 2;}
@media (min-width: 768px) {
  .MD_Wrapper .MD_Input + .MD_Label {height: 20px;width: 20px;}
}
.MD_Wrapper .MD_Input + .MD_Label:before, .MD_Wrapper .MD_Input + .MD_Label:after {background: #fff;content: "";cursor: pointer;display: flex;left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);}
.MD_Wrapper .MD_Input + .MD_Label:before {height: 2px;width: 50%;}
.MD_Wrapper .MD_Input + .MD_Label:after {height: 50%;width: 2px;}
.MD_Wrapper .MD_Input ~ .MD_Overlay {display: none;height: 100%;left: 0;position: absolute;width: 100%;top: 0;z-index: 3;}
.MD_Wrapper .MD_Input:checked + .MD_Label {transform: rotate(45deg);z-index: 5;background-color: #011B2A;}
.MD_Wrapper .MD_Input:checked ~ .MD_Modal_Content {opacity: 1;visibility: visible;}
.MD_Wrapper .MD_Input:checked ~ .MD_Overlay {display: block;}
.MD_Modal {bottom: 0;height: 100%;left: 0;position: absolute;top: 0;right: 0;width: 100%;z-index: 1;}
HTML
<!------------ Bootstrap Start ------------>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-sm">
      <!------------ Component Start ------------>
      <div class="MD_Wrapper">
        <!------------ Image Start ------------>
        <figure>
          <img class="img-fluid" src="https://marketingdigitaal.nl/wp-content/uploads/2024/11/Werkgebied-Marketing-Digitaal.webp" width="350px"alt="Adres en Werkgebied Marketing Digitaal">
        </figure>
        <!------------ Image End -------------->
        <!------------ HotSpot Wrapper Start ------------>
        <div class="MD_Modal">
          <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H1" name="Groningen" class="MD_Input" style="right: 10%; top: 7%;">
            <label for="H1" class="MD_Label" style="right: 10%; top: 7%;"></label>
            <label for="H1" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 9.6%; top: 6.6%;">
              <div class="Content_Wrapper">
                <label for="H1" class="MD_Close"></label>
                <h3 class="MD_Title">Groningen</h3>
                <p>Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
          <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H2" name="Drenthe" class="MD_Input" style="right: 11%; top: 19.4%;">
            <label for="H2" class="MD_Label" style="right: 11%; top: 19.4%;"></label>
            <label for="H2" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 10.6%; top: 19%;">
              <div class="Content_Wrapper">
                <label for="H2" class="MD_Close"></label>
                <h3 class="MD_Title">Drenthe</h3>
                <p>Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
          <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H3" name="Friesland" class="MD_Input" style="right: 32%; top: 13%;">
            <label for="H3" class="MD_Label" style="right: 32%; top: 13%;"></label>
            <label for="H3" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 31.6%; top: 12.7%;">
              <div class="Content_Wrapper">
                <label for="H3" class="MD_Close"></label>
                <h3 class="MD_Title">Friesland</h3>
                <p>Marketing Digitaal is gevestigd in Groningen dus we zijn in de buurt en klaar om te helpen. Neem gerust contact op!</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
          <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H4" name="Overijssel" class="MD_Input" style="right: 16%; top: 33%;">
            <label for="H4" class="MD_Label" style="right: 16%; top: 33%;"></label>
            <label for="H4" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 15.6%; top: 32.7%;">
              <div class="Content_Wrapper">
                <label for="H4" class="MD_Close"></label>
                <h3 class="MD_Title">Overijssel</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Overijssel en kunnen je op afstand helpen met al jouw vraagstukken.</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
    <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H5" name="Flevoland" class="MD_Input" style="right: 38.4%; top: 32%;">
            <label for="H5" class="MD_Label" style="right: 38.4%; top: 32%;"></label>
            <label for="H5" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 38%; top: 31.7%;">
              <div class="Content_Wrapper">
                <label for="H5" class="MD_Close"></label>
                <h3 class="MD_Title">Flevoland</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Flevoland en kunnen je op afstand helpen met al je vraagstukken.</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
  <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H6" name="Noord-Holland" class="MD_Input" style="left: 35.4%; top: 30%;">
            <label for="H6" class="MD_Label" style="left: 35.4%; top: 30%;"></label>
            <label for="H6" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="left: 35%; top: 29.7%;">
              <div class="Content_Wrapper">
                <label for="H6" class="MD_Close"></label>
                <h3 class="MD_Title">Noord-Holland</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Noord-Holland en kunnen je op afstand helpen met al je vraagstukken.</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
  <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H7" name="Utrecht" class="MD_Input" style="left: 45.4%; top: 44.4%;">
            <label for="H7" class="MD_Label" style="left: 45.4%; top: 44.4%;"></label>
            <label for="H7" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="left: 45%; top: 44.1%;">
              <div class="Content_Wrapper">
                <label for="H7" class="MD_Close"></label>
                <h3 class="MD_Title">Utrecht</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Utrecht en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
 <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H8" name="Gelderland" class="MD_Input" style="right: 28.4%; top: 44.4%;">
            <label for="H8" class="MD_Label" style="right: 28.4%; top: 44.3%;"></label>
            <label for="H8" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 28%; top: 44%;">
              <div class="Content_Wrapper">
                <label for="H8" class="MD_Close"></label>
                <h3 class="MD_Title">Gelderland</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Gelderland en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
 <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H9" name="Zuid-Holland" class="MD_Input" style="left: 27.5%; top: 48.4%;">
            <label for="H9" class="MD_Label" style="left: 27.5%; top: 48.4%;"></label>
            <label for="H9" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="left: 27%; top: 48%;">
              <div class="Content_Wrapper">
                <label for="H9" class="MD_Close"></label>
                <h3 class="MD_Title">Zuid-Holland</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Zuid-Holland en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
 <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H10" name="Noord-Brabant" class="MD_Input" style="right: 41.4%; top: 61.3%;">
            <label for="H10" class="MD_Label" style="right: 41.4%; top: 61.3%;"></label>
            <label for="H10" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 41%; top: 61%;">
              <div class="Content_Wrapper">
                <label for="H10" class="MD_Close"></label>
                <h3 class="MD_Title">Noord-Brabant</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Noord-Brabant en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
 <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H11" name="Limburg" class="MD_Input" style="right: 28.4%; top: 71.3%;">
            <label for="H11" class="MD_Label" style="right: 28.4%; top: 71.3%;"></label>
            <label for="H11" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="right: 28%; top: 71%;">
              <div class="Content_Wrapper">
                <label for="H11" class="MD_Close"></label>
                <h3 class="MD_Title">Limburg</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Limburg en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
 <!------------ HotSpot Input Start ------------>
          <div class="MD_Modal_Input">
            <input type="checkbox" id="H12" name="Zeeland" class="MD_Input" style="left: 10%; top: 70%;">
            <label for="H12" class="MD_Label" style="left: 11.5%; top: 62%;"></label>
            <label for="H12" class="MD_Overlay"></label>
            <!------------ Content Start ------------>
            <div class="MD_Modal_Content" style="left: 11%; top: 61.7%;">
              <div class="Content_Wrapper">
                <label for="H12" class="MD_Close"></label>
                <h3 class="MD_Title">Zeeland</h3>
                <p>Ons hoofdkantoor is in Groningen, maar wij zijn ook actief in Zeeland en kunnen je op afstand helpen met al jouw vraagstukken</p>
              </div>
            </div>
            <!------------ Content End -------------->
          </div>
          <!------------ HotSpot Input End -------------->
        </div>
        <!------------ HotSpot Wrapper End -------------->
      </div>
      <!------------ HotSpot Wrapper End -------------->
    </div>
    <!------------ Component End -------------->
  </div>
</div>
</div>
<!------------ Bootstrap End -------------->

Je eigen Hotspot afbeelding maken

Bovenstaande HTML en CSS zijn specifiek gericht op het tonen van een werkgebied binnen nederland. Daar kan je deze dus vrijwel direct voor gebruiken. In andere gevallen kan het zijn dat je een andere afbeelding als basis gebruikt en dus meer zal moeten aanpassen. Wat we aanraden is rekening te houden met de richting van je tekstvak die wordt getoond na het klikken op de hotspot. Gaat die naar rechts, voer dan van zowel de inputknop als het tekstvak bij “style” left in. Dan begint je inputknop namelijk op hetzelfde punt als je tekstvak en valt de sluitknop mooi in de hoek aan. Andersom voer je bij links dus “right” in.
Nou kan je eenvoudig zelf jouw hotspot kaart maken met de gewenste inhoud. Hopelijk was dit leerzaam en kan je nu ook zelf jouw hotspot afbeelding maken, of in ieder geval verder bouwen met de informatie.
Wil je liever een nog betere hotspot op maat laten maken? Wij kunnen dit voor je doen! Neem contact met ons op om te kijken wat wij voor jou kunnen betekenen.

Gratis Online Marketing Scan?

Wil jij weten hoe jouw online marketingstrategie scoort? Vraag dan hieronder eenvoudig een gratis Online Marketing Scan aan! Ontvang een gedetailleerd rapport met inzichten en praktische tips om jouw online zichtbaarheid en conversies te verbeteren.

🚀 Gratis online marketing scan
Advies van Marketing Digitaal

Wat zeggen onze klanten over ons?

Beoordeling Marketing Digitaal 4.7 4.7 van 5 sterren op basis van 116 reviews

Humanitas Groningen

Klantbeoordeling Humanitas Groningen

Marketing Digitaal heeft ons fantastisch geholpen om de online zoekmachine optimalisatie te verbeteren. Een absolute meerwaarde door inzichten en ondersteuning!

Solarshop Noord

Klantbeoordeling Solarshop Noord

Ontzettend prettige samenwerking, altijd bereikbaar en zelfs in staat om onze veelal aparte plannen een inrichting te geven, toppers!

Totaalsolar

Klantbeoordeling Totaalsolar Marum

Het is een van de beste online marketingbureaus van Nederland. De kennis en expertise van zowel Jorick als Martijn heeft ons elke keer weer versteld doen staan.

Direct een melding bij nieuwe artikelen?

VOEG EEN REACTIE TOE

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *