NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Productfoto met hotspots New

Photo of a heat pump with numbered hotspots; clicking a dot or the parts list opens the note next to that part. Arrow keys jump between dots, Esc closes. Pulsing ring only without prefers-reduced-motion; on mobile the note sits below the photo.

Kroon Installatietechniek · Apeldoorn

Wat er buiten aan uw huis komt te hangen

De buitenunit van een lucht-waterwarmtepomp, zoals wij hem plaatsen. Klik op een nummer.

Buitenunit van een warmtepomp tegen een bakstenen gevel, met leidingen door de muur

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Productfoto met hotspots · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="phs">
  <div class="phs__in">
    <div class="phs__head">
      <p class="phs__eyebrow">Kroon Installatietechniek · Apeldoorn</p>
      <h2 class="phs__h">Wat er buiten aan uw huis komt te hangen</h2>
      <p class="phs__lead">De buitenunit van een lucht-waterwarmtepomp, zoals wij hem plaatsen. Klik op een nummer.</p>
    </div>
    <div class="phs__grid">
      <div class="phs__fig">
        <div class="phs__pic">
        <img class="phs__img" src="https://neddev.com/lab-media/product-hotspots-1.webp" alt="Buitenunit van een warmtepomp tegen een bakstenen gevel, met leidingen door de muur" width="1200" height="655">
        <button type="button" class="phs__dot" style="--x:45.8%;--y:48.9%" data-i="0" aria-expanded="false" aria-controls="phs-note">1<span class="phs__vh"> Ventilator</span></button>
        <button type="button" class="phs__dot" style="--x:68.5%;--y:28%" data-i="1" aria-expanded="false" aria-controls="phs-note">2<span class="phs__vh"> Aansluitkast</span></button>
        <button type="button" class="phs__dot" style="--x:80%;--y:55.5%" data-i="2" aria-expanded="false" aria-controls="phs-note">3<span class="phs__vh"> Leidingen door de gevel</span></button>
        <button type="button" class="phs__dot" style="--x:57.5%;--y:84.5%" data-i="3" aria-expanded="false" aria-controls="phs-note">4<span class="phs__vh"> Trillingsdempers en sokkel</span></button>
        </div>
        <div class="phs__note" id="phs-note" role="region" aria-live="polite" hidden><button type="button" class="phs__close" aria-label="Uitleg sluiten"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button><p class="phs__nt"></p><p class="phs__nd"></p></div>
      </div>
      <ol class="phs__list">
        <li><button type="button" class="phs__li" data-i="0"><span>1</span>Ventilator<small>35 dB(A) op 5 meter</small></button></li>
        <li><button type="button" class="phs__li" data-i="1"><span>2</span>Aansluitkast<small>eigen groep 16 A</small></button></li>
        <li><button type="button" class="phs__li" data-i="2"><span>3</span>Leidingen door de gevel<small>28 mm, geïsoleerd</small></button></li>
        <li><button type="button" class="phs__li" data-i="3"><span>4</span>Trillingsdempers en sokkel<small>geen bromtoon bij de buren</small></button></li>
      </ol>
    </div>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →