Gratis tool van The Webnurse

Maak je afbeeldingen
interactief

Teken klikbare gebieden op elke afbeelding, voeg pop-ups toe met uitleg en links, en exporteer alles als kant-en-klare code voor je website. Zonder één regel te schrijven.

Geen account nodig · Geen installatie · Gratis
Kantoor A Vergadering Opslag Kantoor B Open space Keuken
+
+
Eigenschappen
Pop-up stijl
✓ Opslaan
✕ Verwijder
Code klaar in 1 klik Plak op je website

Drie stappen naar
interactieve inhoud

Van upload tot live op je website in enkele minuten. Geen technische kennis vereist.

01

Upload je afbeelding

Laad je plattegrond, infographic, productfoto of kaart. JPG, PNG en WEBP worden ondersteund.

02

Teken je gebieden

Klik en sleep om rechthoeken, cirkels of vrije polygonen te tekenen. Voeg per gebied een titel, beschrijving en link toe.

03

Exporteer & plak

Genereer de HTML/CSS/JS code met één klik. Kopieer en plak in je bestaande website. Geen plugins, geen frameworks.

Alles wat je nodig
hebt, niets meer

🗺️

Drie vormen

Teken rechthoeken door te slepen, cirkels voor ronde gebieden, of vrije polygonen voor onregelmatige vormen. Punten zijn achteraf nog verplaatsbaar.

💬

Rijke pop-ups

Elke hotspot krijgt een eigen pop-up met titel, beschrijving en optionele link. Stel de achtergrondkleur, randkleur en dikte individueel in.

📱

Responsief

Hotspots gebruiken genormaliseerde coördinaten en schalen perfect mee op elk schermformaat — van smartphone tot widescreen monitor.

💾

JSON import & export

Sla je project op als JSON-bestand en hervat later waar je gebleven bent. Handig voor terugkerende klanten of grote projecten.

Code die
gewoon werkt

De gegenereerde code is pure HTML, CSS en JavaScript. Geen dependencies, geen buildstap, geen abonnement.

Plug & play

Kopieer het blok en plak het in je pagina. Het werkt direct, ook in WordPress, Squarespace of een zelfgebouwde site.

🔒

Geen externe servers

Alles draait lokaal in de browser. Je afbeelding en data verlaten nooit je computer.

Toegankelijk

Toetsenbordnavigatie en ARIA-labels zijn ingebouwd. Hotspots werken ook zonder muis.

hotspot-embed.html
⎘ kopiëren
<!-- Hotspot Image Embed
     Geen plugins nodig. -->
<div class="hs-container">
  <img src="plattegrond.jpg"/>
</div>

<style>
.hs-container {
  position: relative;
  width: 100%;
}
</style>

<script>
// Alle logica zit hier in
// Responsief · Toegankelijk
const hotspots = [...]
</script>
Gratis · Geen account nodig

Klaar om te starten?

Open de editor, upload je eerste afbeelding en zie hoe snel je interactieve hotspots kunt maken.

Open de Hotspot Editor

Werkt direct in je browser · Geen installatie · 100% gratis