Wat te weten
• Gebruik een afbeelding van normaal formaat die de browser niet opnieuw zal schalen. 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:
In dit artikel wordt uitgelegd 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, wat alle gegevens zijn die u nodig hebt om aan de slag te gaan met afbeeldingskaarten.
Een afbeeldingskaart maken
Om een afbeeldingskaart te maken, selecteert u eerst een afbeelding die als basis van de kaart zal dienen. De afbeelding moet een “normale grootte” hebben, dat wil zeggen dat u geen afbeelding moet gebruiken die zo groot is dat de browser deze schaalt. Wanneer u de afbeelding invoegt, voegt u een extra attribuut toe dat de coördinaten van de kaart identificeert:
class=”ql-syntax”> Wanneer u een afbeeldingskaart maakt, maakt u een gebied waarop op de afbeelding kan worden geklikt, zodat de coördinaten van de kaart moeten overeenkomen met de hoogte en breedte van de afbeelding die u hebt geselecteerd. Kaarten ondersteunen drie verschillende soorten vormen:
- rect – een rechthoek of vierzijdige figuur
- poly—een veelhoek of meerzijdige figuur
- cirkel – een cirkel
Om de gebieden te creëren, moet u de specifieke coördinaten isoleren die u 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 linker- 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 zou je typen 0,0,10,15. Je neemt het dan op in de kaart:
class=”ql-syntaxis”>
Voor een veelhoek, je brengt elk in kaart x,y afzonderlijk coördineren. De webbrowser verbindt automatisch de laatste set coördinaten met de eerste; alles binnen deze coördinaten maakt deel uit van de kaart.
class=”ql-syntaxis”>
Cirkel vormen vereisen slechts twee coördinaten, 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:
class=”ql-syntaxis”>
Alle gebieden en vormen kunnen in dezelfde kaarttag worden opgenomen:
class=”ql-syntaxis”>
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 imagemap in het gedrang. Dus voel je vrij om deze stabiele, goed begrepen technologie te blijven gebruiken, wetende dat er momenteel efficiëntere alternatieven zijn in zwang met webdesigners.