Productfoto met hotspots Nieuw

<!-- 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>

/* Productfoto met hotspots · NedDev · eigen werk. */
/* fonts (Fontshare): sora@400,600 */
.phs{--ink:#17212b;--mut:#596673;--bg:#fff;--soft:#f1f4f3;--line:#dde3e1;--acc:#0d7a5f;background:var(--bg);color:var(--ink);font-family:'Sora','Switzer',sans-serif;box-sizing:border-box}
.phs *,.phs *::before{box-sizing:border-box}
.phs [hidden]{display:none!important}
.phs__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phs__in{max-width:1200px;margin:0 auto;padding:44px 32px 40px}
.phs__head{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;align-items:end;margin-bottom:22px}
.phs__eyebrow{grid-column:1/-1;margin:0;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.phs__h{margin:0;font-weight:600;font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.02em;max-width:22ch}
.phs__lead{margin:0;font-size:15px;line-height:1.55;color:var(--mut)}
.phs__grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}
.phs__fig{position:relative}
.phs__pic{position:relative;aspect-ratio:1200/655;border-radius:6px;overflow:hidden;background:#ddd}
.phs__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phs__dot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:2px solid #fff;background:var(--acc);color:#fff;font:600 13px 'Sora',sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:background-color .15s ease,transform .15s ease}
.phs__dot::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:phs-pulse 2.4s ease-out infinite;pointer-events:none}
.phs__dot:hover{background:#0a5f4a;transform:scale(1.08)}
.phs__dot[aria-expanded="true"]{background:#fff;color:var(--acc)}
.phs__dot[aria-expanded="true"]::before{animation:none;opacity:0}
.phs__dot:focus-visible{outline:3px solid #ffd23f;outline-offset:3px}
@keyframes phs-pulse{0%{transform:scale(.7);opacity:1}70%,100%{transform:scale(1.35);opacity:0}}
.phs__note{position:absolute;z-index:3;left:var(--nx);top:var(--ny);width:250px;transform:translate(22px,-50%);padding:14px 36px 14px 16px;background:#fff;border-radius:6px;box-shadow:0 14px 32px -12px rgba(0,0,0,.45)}
.phs__note.is-left{transform:translate(calc(-100% - 22px),-50%)}
.phs__nt{margin:0 0 4px;font-weight:600;font-size:15px}
.phs__nd{margin:0;font-size:13px;line-height:1.5;color:var(--mut)}
.phs__close{position:absolute;top:8px;right:8px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink)}
.phs__close svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.phs__close:hover{background:var(--soft)}
.phs__close:focus-visible{outline:2px solid var(--acc)}
.phs__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.phs__li{width:100%;display:grid;grid-template-columns:30px 1fr;column-gap:12px;text-align:left;padding:13px 6px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:600 14.5px 'Sora',sans-serif;cursor:pointer;transition:background-color .15s ease}
.phs__li span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);font-size:12.5px}
.phs__li small{grid-column:2;font-weight:400;font-size:12.5px;color:var(--mut)}
.phs__li:hover{background:var(--soft)}
.phs__li[aria-pressed="true"]{background:var(--soft)}
.phs__li[aria-pressed="true"] span{background:var(--acc);color:#fff}
.phs__li:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (max-width:860px){
  .phs__in{padding:30px 14px 28px}
  .phs__head{grid-template-columns:1fr}
  .phs__grid{grid-template-columns:1fr}
  .phs__dot{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12px}
  .phs__note,.phs__note.is-left{position:relative;left:auto;top:auto;width:auto;transform:none;margin-top:10px;box-shadow:none;border:1px solid var(--line);background:var(--soft)}
}
@media (prefers-reduced-motion:reduce){.phs *{transition:none!important}.phs__dot::before{animation:none;opacity:.6;transform:none}}

// Productfoto met hotspots · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.phs'); if(!w) return;
const D=[{t:'Ventilator',d:'Zuigt buitenlucht door de verdamper. ’s Nachts draait hij op lagere toeren: 35 dB(A) gemeten op 5 meter, zachter dan een koelkast in de keuken.'},
 {t:'Aansluitkast',d:'Hier komen de voeding (een eigen groep van 16 A in uw meterkast) en de kabel naar de binnenunit binnen. Afgedekt tegen regen en ongedierte.'},
 {t:'Leidingen door de gevel',d:'Aanvoer en retour van 28 mm koper, met 19 mm UV-bestendige isolatie. De doorvoer wordt aan de binnenkant luchtdicht afgekit.'},
 {t:'Trillingsdempers en sokkel',d:'Rubberen voeten op een betonnen sokkel, los van de gevel. Zo hoort u en uw buren geen bromtoon van de compressor.'}];
const dots=[...w.querySelectorAll('.phs__dot')], lis=[...w.querySelectorAll('.phs__li')], note=w.querySelector('.phs__note'), nt=w.querySelector('.phs__nt'), nd=w.querySelector('.phs__nd'), fig=w.querySelector('.phs__fig');
let cur=-1;
const close=(back)=>{if(cur<0) return; const d=dots[cur]; note.hidden=true; dots.forEach(x=>x.setAttribute('aria-expanded','false')); lis.forEach(x=>x.setAttribute('aria-pressed','false')); cur=-1; if(back) d.focus();};
const open=(i,from)=>{if(cur===i&&from!=='key'){close(); return;} cur=i; const d=dots[i];
  dots.forEach((x,k)=>x.setAttribute('aria-expanded',k===i?'true':'false')); lis.forEach((x,k)=>x.setAttribute('aria-pressed',k===i?'true':'false'));
  nt.textContent=(i+1)+'. '+D[i].t; nd.textContent=D[i].d;
  const x=parseFloat(d.style.getPropertyValue('--x')), y=parseFloat(d.style.getPropertyValue('--y'));
  note.style.setProperty('--nx',x+'%'); note.style.setProperty('--ny',Math.min(Math.max(y,24),76)+'%'); note.classList.toggle('is-left',x>55); note.hidden=false;};
dots.forEach((d,i)=>{d.addEventListener('click',()=>open(i)); d.addEventListener('keydown',e=>{let n=-1; if(e.key==='ArrowRight'||e.key==='ArrowDown') n=(i+1)%dots.length; else if(e.key==='ArrowLeft'||e.key==='ArrowUp') n=(i-1+dots.length)%dots.length; if(n>-1){e.preventDefault(); dots[n].focus(); open(n,'key');}});});
lis.forEach((b,i)=>b.addEventListener('click',()=>open(i)));
lis.forEach(b=>b.setAttribute('aria-pressed','false'));
w.querySelector('.phs__close').addEventListener('click',()=>close(true));
w.addEventListener('keydown',e=>{if(e.key==='Escape') close(true);});
document.addEventListener('click',e=>{if(cur>-1&&!w.contains(e.target)) close();});
}
init(document.querySelector('.jouw-container'));