Wat te weten
• Gebruik een afbeelding van normaal formaat die de browser niet kan herschalen. Je hebt ook een afbeeldingseditor en een HTML- of teksteditor nodig.
• Voeg bij het invoegen van de afbeelding een extra attribuut toe om de coördinaten van de kaart te identificeren.
• Bijvoorbeeld:
Dit artikel legt uit hoe u Image Maps maakt met HTML-tags in plaats van een imagemap-editor. De meeste afbeeldingseditors laten u de coördinaten van uw muis zien wanneer u in de afbeelding wijst, dit zijn alle gegevens die u nodig hebt om aan de slag te gaan met afbeeldingskaarten.
Een afbeeldingskaart maken
Als u een afbeeldingskaart wilt maken, selecteert u eerst een afbeelding die als basis van de kaart zal dienen. De afbeelding moet een "normale grootte" hebben, dat wil zeggen, u mag geen afbeelding gebruiken die zo groot is dat de browser deze zal schalen.
Wanneer u de afbeelding invoegt, voegt u een extra attribuut toe dat de coördinaten van de kaart identificeert:
Als je een afbeeldingskaart maakt, creëer je een gebied waarop op de afbeelding kan worden geklikt, dus de coördinaten van de kaart moeten overeenkomen met de hoogte en breedte van de afbeelding die je hebt geselecteerd. Kaarten ondersteunen drie verschillende soorten vormen:
- rect-een rechthoek of vierzijdige figuur
- poly-een polygoon of meerzijdige figuur
- circle-a circle
Om de gebieden te creëren, moet je de specifieke coördinaten isoleren die je in kaart wilt brengen. Een kaart kan bestaan uit een of meer gedefinieerde gebieden op de afbeelding die, wanneer erop wordt geklikt, een nieuwe hyperlink openen.
Voor een rechthoek brengt u alleen de linkerboven- en rechterbenedenhoek in kaart. Alle coördinaten worden weergegeven als x, y (boven, boven). Dus voor de linkerbovenhoek 0, 0 en de rechterbenedenhoek 10, 15 typt u 0, 0, 10, 15. Je neemt het dan op in de kaart:
Voor een polygoon breng je elke x, y-coördinaat afzonderlijk in kaart. De webbrowser verbindt automatisch de laatste set coördinaten met de eerste; alles binnen deze coördinaten maakt deel uit van de kaart.
Cirkelvormen hebben slechts twee coördinaten nodig, zoals de rechthoek, maar voor de tweede coördinaat specificeert u de straal of de afstand vanaf het middelpunt van de cirkel. Dus voor een cirkel met het middelpunt op 122, 122 en een straal van 5 zou je 122, 122, 5: schrijven
Alle gebieden en vormen kunnen in dezelfde kaarttag worden opgenomen:
Overwegingen
Image maps waren veel gebruikelijker in het Web 1.0-tijdperk van de jaren negentig tot het begin van de jaren 2000. Image maps vormden vaak de basis van de navigatie van een website. Een ontwerper zou een soort afbeelding maken om menu-items aan te geven en vervolgens een kaart instellen.
Moderne benaderingen moedigen responsief ontwerp aan en gebruiken trapsgewijze stijlbladen om de plaatsing van afbeeldingen en hyperlinks op een pagina te regelen.
Hoewel de kaarttag nog steeds wordt ondersteund in de HTML-standaard, kan het gebruik van mobiele apparaten met kleine vormfactoren leiden tot onverwachte prestatieproblemen met afbeeldingskaarten. Bovendien maken bandbreedteproblemen of kapotte afbeeldingen de waarde van een afbeeldingskaart in de war.
Dus, voel je vrij om deze stabiele, goed begrepen technologie te blijven gebruiken, wetende dat er momenteel efficiëntere alternatieven zijn bij webdesigners.
