Er was een punt in de geschiedenis van webdesign waar veel sites gebruikten van een functie die bekend staat als "image maps". Dit is een lijst met coördinaten die is gekoppeld aan een specifieke afbeelding op een pagina. Deze coördinaten maken hyperlinkgebieden op die afbeelding, essentieel door "hotspots" toe te voegen aan een afbeelding, die elk kunnen worden gecodeerd om naar verschillende plaatsen te linken. Dit is heel anders dan alleen het toevoegen van een koppelingstag aan een afbeelding, waardoor die hele afbeelding een grote link naar een enkele bestemming zou worden.
Voorbeelden: stel je voor dat je een grafisch bestand hebt met een afbeelding van de Verenigde Staten. Als u wilt dat elke staat "klikbaar" is zodat ze naar pagina's over die specifieke staat gaan, kunt u dit doen met een afbeelding. Evenzo, als je een afbeelding van een muziekband had, zou je een afbeelding kunnen gebruiken om elk afzonderlijk lid klikbaar te maken naar een volgende pagina over dat bandlid.
Klinken beeldkaarten nuttig? Dat waren ze zeker, maar ze zijn uit de gratie geraakt op het internet van vandaag. Dit is, althans gedeeltelijk, omdat beeldkaarten specifieke coördinaten vereisen om te werken. Sites van vandaag zijn gebouwd om responsief te zijn en afbeeldingen kunnen worden geschaald op basis van de grootte van een scherm of apparaat. Dit betekent dat vooraf ingestelde coördinaten, zoals afbeeldingen, werken, uit elkaar vallen wanneer een site wordt geschaald en de afbeeldingen van grootte veranderen. Daarom worden beeldmappen tegenwoordig zelden gebruikt op productiesites, maar ze hebben nog steeds voordelen voor demo's of gevallen waarbij u de grootte van een pagina dwingt.
Wilt u weten hoe u een imagemap maakt, in het bijzonder hoe u dat doet met Dreamweaver? Het proces is niet bijzonder moeilijk, maar het is ook niet gemakkelijk, dus je moet enige ervaring hebben voordat je begint.
Ermee beginnen
Laten we beginnen. De eerste stap die u moet nemen, is om een afbeelding toe te voegen aan uw webpagina. U klikt vervolgens op de afbeelding om deze te markeren. Van daaruit gaat u naar het eigenschappenmenu (en klikt u op een van de drie hotspot-tekentools: rechthoek, cirkel of polygoon.) Vergeet niet uw afbeelding een naam te geven, wat u in de eigenschappenbalk kunt doen. alles wat je maar wilt. Gebruik "kaart" als voorbeeld.
Teken nu de gewenste vorm op uw afbeelding met behulp van een van deze gereedschappen. Als u rechthoekige vlekken nodig heeft, gebruikt u de rechthoek. Hetzelfde voor de cirkel. Als u complexere hotspotvormen wilt, gebruikt u de polygoon. Dit is wat u waarschijnlijk zou gebruiken in het voorbeeld van de Amerikaanse kaart, omdat de polygoon u in staat zou stellen punten te laten vallen en zeer complexe en onregelmatige vormen op de afbeelding te creëren
Typ in het eigenschappenvenster van de hotspot of blader naar de pagina waarnaar de hotspot moet linken. Dit is wat dat koppelbare gebied creëert. Blijf hotspots toevoegen totdat uw kaart compleet is en alle koppelingen die u wilt toevoegen zijn toegevoegd.
Als u klaar bent, bekijkt u uw imagemap in een browser om te controleren of deze correct werkt. Klik op elke koppeling om ervoor te zorgen dat deze naar de juiste bron of webpagina gaat.
Nadelen van Image Maps
Houd er nogmaals rekening mee dat image maps verschillende nadelen hebben, zelfs buiten het bovengenoemde gebrek aan ondersteuning bij responsieve websites. Ten eerste kunnen kleine details worden verdoezeld in een afbeelding. Geografische afbeeldingskaarten kunnen bijvoorbeeld helpen bij het bepalen van welk continent een gebruiker is, maar deze kaarten zijn mogelijk niet gedetailleerd genoeg om het land van herkomst van de gebruiker aan te wijzen. Dit betekent dat een imagemap kan helpen bepalen of een gebruiker afkomstig is uit Azië, maar niet uit Cambodja in het bijzonder.
Afbeeldingen kunnen ook traag worden geladen. Ze mogen niet meerdere keren op een website worden gebruikt omdat ze te veel ruimte in beslag nemen om op elke pagina van een website te worden gebruikt. Te veel afbeeldingen op één pagina zouden een ernstig knelpunt en een enorme impact op de prestaties van de site veroorzaken.
Ten slotte is het mogelijk dat afbeeldingen met afbeeldingen voor gebruikers met visuele problemen niet gemakkelijk toegankelijk zijn. Als u wel gebruikmaakt van afbeeldingskaarten, moet u ook een alternatief navigatiesysteem voor deze gebruikers maken.
Bottom Line
Gebruik af en toe afbeeldingen van kaarten wanneer u probeert een snelle demo van een ontwerp samen te stellen en hoe het werkt. Als u bijvoorbeeld een ontwerp voor een mobiele app bespiedt en u wilt afbeeldingskaarten gebruiken om hotspots te maken om de interactiviteit van de app te simuleren. Dit is veel eenvoudiger dan het coderen van de app of het bouwen van dummy-webpagina's die zijn gebouwd volgens de huidige normen met HTML en CSS. Maar het plaatsen van hen in een productiesite of app is erg lastig en moet waarschijnlijk worden vermeden op de websites van vandaag.
