Image map generator: teken klikbare gebieden, krijg HTML | We.Inc
Teken rechthoeken, cirkels en polygonen op uw eigen afbeelding, geef elk een link en alt-tekst, en kopieer dan klassieke map- en area-HTML of een responsieve SVG-versie.
Image map generator
Een image map maakt van delen van één afbeelding aparte links. Laad een afbeelding, sleep om rechthoeken of cirkels te tekenen, klik punten aan voor polygonen, en typ voor elk gebied een link en alt-tekst. Kopieer de klassieke map- en area-HTML, of een responsieve SVG-versie waarvan de gebieden op telefoons met de afbeelding meekrimpen.
area-vormen en hun coords
Betekenis
Hoek linksboven en hoek rechtsonder
Middelpunt en straal
Elke hoek op volgorde; de vorm sluit zichzelf
(geen)
Alles wat niet door een ander gebied wordt bedekt
Plattegronden, productdiagrammen, teamfoto's en kaarten hebben vaak meerdere links binnen één afbeelding nodig. De gebieden op het oog tekenen gaat veel sneller dan pixels opmeten, en uw afbeelding verlaat uw computer nooit: die wordt in de browser gelezen en alleen het formaat wordt in de code gebruikt.
Gebruik de voorbeeldplattegrond of kies uw eigen afbeeldingsbestand. De coördinaten worden gemeten in de echte pixels van de afbeelding, ook als de preview verkleind is.
Kies Rechthoek of Cirkel en sleep over de afbeelding, of kies Polygoon, klik op elke hoek en druk dan op Polygoon voltooien.
Bewerk de link, alt-tekst en coördinaten van elk gebied in de lijst. Getypte coördinaten werken de tekening bij, zodat ook toetsenbordgebruikers een map kunnen bouwen.
Kopieer de klassieke HTML of de responsieve SVG. Vervang het afbeeldingspad in de code door de plek waar het bestand op uw site komt te staan.
Elk gebied met een href heeft alt-tekst nodig. Die lezen schermlezers voor, dus beschrijf de bestemming, zoals Reserveer een tafel in het café.
Coördinaten van een klassieke image map zijn vaste CSS-pixels. Als CSS de afbeelding op telefoons verkleint, blijven de gebieden waar ze waren, dus gebruik de SVG-uitvoer voor vloeiende layouts.
Maak klikbare gebieden groot genoeg om er makkelijk op te tikken, en vermijd gebieden die elkaar zonder tussenruimte raken.
Verstop de enige route naar een pagina niet in een afbeelding. Herhaal belangrijke links als gewone tekst ergens in de buurt.
Veelgestelde vragen
Hoe koppel ik de map aan de afbeelding?
Geef de map een naam, en zet dan usemap op de img met dezelfde naam met een # ervoor, bijvoorbeeld usemap="#site-map" en map name="site-map". De generator schrijft beide voor u.
Zijn HTML image maps responsief?
Niet uit zichzelf. Coördinaten zijn aantallen CSS-pixels, dus ze volgen een afbeelding die CSS van formaat verandert niet. De SVG-uitvoer lost dit op met een viewBox, die de afbeelding en de linkvormen samen schaalt.
Wordt mijn afbeelding geüpload?
Nee. Het bestand wordt geopend met een lokale object-URL zodat de browser het kan tonen en de breedte en hoogte kan uitlezen. Er wordt niets naar We.Inc of iemand anders verstuurd.
Mogen gebieden overlappen?
Dat mag. Waar twee gebieden overlappen, krijgt het gebied dat als eerste in de map staat de klik, dus zet kleinere gebieden vóór grotere gebieden die ze omringen.
Klassieke map of SVG-links
Het paar map en area werkt al tientallen jaren in browsers en houdt de afbeelding als een gewone img, wat eenvoudig is voor contenttools. De zwakte zit in de vaste coördinaten.
De SVG-versie tekent de afbeelding binnen een svg-element en verpakt elke vorm in een link. Omdat alles één viewBox deelt, schalen de gebieden perfect mee, en kunt u met CSS op de vormen een hover-omlijning toevoegen.
Toegankelijke klikbare afbeeldingen
Geef de afbeelding zelf alt-tekst die de hele afbeelding beschrijft, en elk gebied alt-tekst die de bestemming noemt. Toetsenbordgebruikers tabben in bronvolgorde door de gebieden, dus zet ze in een logische leesvolgorde.
Test door door het resultaat te tabben. Als de focusvolgorde door de afbeelding heen en weer springt, verander dan de volgorde van de rijen in de lijst voordat u kopieert.
Code voor de voorbeeldplattegrond
Dit zijn de twee uitvoervormen die de generator schrijft voor de vier voorbeeldgebieden.
Klassieke map en area
Werkt overal op de natuurlijke afmeting van de afbeelding, 600 bij 360 pixels.
Responsieve SVG-links
De viewBox komt overeen met het formaat van de afbeelding, dus elke linkvorm schaalt mee met de afbeelding.
Gebied {n}
Teken uw gebieden
Teken rechthoeken, cirkels en polygonen op de voorbeeldplattegrond of uw eigen afbeelding, en stel dan voor elk gebied een link en alt-tekst in.
Uw afbeelding
Tekengereedschap
Rechthoek
Cirkel
Polygoon
Polygoon voltooien
Annuleren
Afbeeldingsformaat: {w} × {h} pixels.
Klik op elke hoek en daarna op Polygoon voltooien.