Hoe krijg je verscheidene links in één plaatje?
Een afbeelding met een link heb je vast wel eens gemaakt. Heb je een webshop dan is het gehele plaatje vaak aanklikbaar. Dat is eigenlijk simpel het plaatje insluiten in de link, oftewel
Maar wat nu als je in één afbeelding meerdere links wilt hebben? Hoe doe je dat? Daar ga ik in deze blog op in.
Waarom meerdere links in een afbeelding?
- Bijvoorbeeld voor visuele weergave voor navigatie. Kijk hiernaast eens naar het plaatje van het stappenplan voor online succes. Elke stap is een aparte link naar de desbetreffende pagina. Desondanks is het toch één plaatje.
- Mooiere layout. Je kunt een plaatje ook opknippen in verschillende plaatjes, zoals het betreffende stappenplan. Nadeel daarvan is dan dat de plaatjes meestal niet naadloos op elkaar aansluiten met als gevolg lastige uitlijning of een deeltje achtergrond.
- Je maakt een compositieplaatje met verschillende producten die je aanbiedt, bijvoorbeeld een gedekte tafel. Dan is het ook leuk dat je de desbetreffende onderdelen kunt aanklikken voor meer informatie. Door gebruik te maken van één van onderstaande technieken kun je dan ook een tekstje laten verschijnen die extra informatie biedt als je met de muis er over heen gaat zonder dat je het aanklikt. Dat doe je door de title-tag te gebruiken.
<a title="beschrijvende tekst" href="link"></a>
Waarom geen meerdere links in een plaatje?
Er zijn ook een aantal argumenten om meerdere links in één plaatje te vermijden. Echter, deze redenen zijn volgens mij gemakkelijk te omzeilen.
- Om te beginnen wordt het afgeraden om te gebruiken voor navigatie (zoals het plaatje hiernaast). Als je een dergelijk plaatje gebruikt is het niet altijd duidelijk dat het ook als menu klikbaar is. De User Experience is daarmee negatief.De oplossing is natuurlijk er ook voor te zorgen dat de desbetreffende pagina’s ook op een andere wijze te benaderen zijn. Zoals hier in het menu. Op die wijze kan het de User Experience juist verbeteren, doordat het kunnen klikken op het plaatje een aanvulling is.
- Een image map, een mogelijke oplossing voor klikbare plaatjes, zou outdated zijn. Tsja, dat lijkt mij geen probleem maar een zienswijze en een keuze welke methodiek je zou willen gebruiken.
- Een klikbaar plaatje kan trager laden. Dat klopt. En dat willen we niet. Een lagere snelheid heeft zowel invloed op je vindbaarheid (SEO – Google houdt niet van trage pagina’s) als op de user experience. Wil je dit omzeilen kun je een aantal dingen doen.
- Goede hosting: uiteraard. Dat raad ik ook aan als je geen klikbare plaatjes hebt. Neem hiervoor contact op met mij als je goed WordPress Managed Hosting zoekt!
- Dit probleem doet zich vaak voor doordat de plaatjes die gebruikt worden ook grote plaatjes zijn (bestandsgrootte). Dat is dus een keuze. Je kunt de plaatjes ook verkleinen. In sommige gevallen kan dat gewoon met een plugin, maar in andere gevallen zul je dat al moeten regelen voordat je het plaatje uploadt.
- Om een klikbaar plaatje te maken moet je code toevoegen. Hoe meer code je moet toevoegen, hoe trager het één en ander wordt. Gebruik je een image map, dan maak je area’s aan. Zo’n area kan simpel zijn (standaard figuur als cirkel of vierhoek), maar het kan ook zo complex zijn als je wilt (bijvoorbeeld een gezicht vatten in twintig coördinaten in plaats van een cirkel)
- Het gebruik van lazy load.Bij lazy load wordt niet de gehele site ineens gedownload. In plaats daarvan wordt dat gedownload waar je op dat moment bent, of waar je dicht bij bent. Uiteindelijk leidt dat tot minder laden, maar vooral ook een betere gebruikservaring doordat je niet hoeft te wachten op content totdat de gehele website geladen is.
Hoe maak je een klikbaar plaatje
Er zijn 4 mogelijkheden, waarvan ik er drie bespreek:
- layers
- image map
- programmeren
- plugin
Ze hebben elk hun voors en tegens.
Klikbare afbeeldingen door het gebruik van layers
Het aanbrengen van laagjes (layers) op een plaatje wordt heel mooi uitgelegd in dit artikel: www.htmldrive.net/items/show/704/pure-CSS-Image-Maps
Min of meer maak je een drietal laagjes bestaande uit een tweetal plaatjes en een laag met linkgebieden;
- Laag 1: Het eerste plaatje dat normaal te zien is
- Laag 2: Hier maak je gebieden door vormen te definiëren middels coördinaten
- Laag 3; Het tweede plaatje knip je op in verschillende plaatjes. Dit zijn de plaatjes die je te zien krijgt als je er met de muis overheen gaat. Vaak is dat éénzelfde plaatje als het eerste, maar wat dan mogelijk anders is, is:
- dat de kleur van het plaatje verschilt,
- de grootte van het uitgelichte gedeelte van het plaatje verschilt (meestal wat vergroot)
- er een kader of ander effect gecreëert wordt waardoor je ziet dat je daar hetzij iets kunt lezen hetzij kunt klikken
Deze drie lagen moet je dus goed op elkaar afstemmen zodat de plaatjes mooi / naadloos in elkaar overgaan en dat het gebied van het tweede laagje dan ook qua coördinaten overeenstemt met de plaatjes van laag 3.
Voordeel van deze afbeelding met links is dat het een css-oplossing is. In css wordt de site opgemaakt. Het vereist is zekere zin geen programmering (al lijkt het er wel op). Het vertraagt daarmee dus ook niet enorm.
Een ander voordeel is dat je heel mooi kunt hoveren. Dat betekent dat wanneer je er over heen gaat met de muis dat er iets gebeurt. Daarmee geef je de websitebezoeker dus duidelijk aan dat het plaatje klikbaar is.
Het nadeel van deze methode is mijns inzien een groot nadeel. Dat zie je in het bijgevoegde plaatje. Hier heb ik deze methode even losgelaten op mijn site.
Om deze afbeelding met klikbare links werkend te krijgen moet je je plaatje een absolute grootte meegeven. Dat betekent dus dat die niet geschaald kan worden, iets dat in een responsive website natuurlijk wel gebeurt, tenzij je het expliciet overschrijft zoals bij deze methodiek de bedoeling is (waarmee je dus ook je mobielvriendelijkheid in gevaar kunt brengen wat weer niet goed is voor je SEO). Daarmee is deze methodiek dus mijns inziens alleen geschikt voor kleine plaatjes in afmetingen.
Image map
De volgende manier is de image map. Met image map codeer op de pagina zelf links op een afbeelding. De manier waarvan verscheidene mensen dus roepen dat het outdated is, doordat het niet lekker schaalt. Toch is dat de wijze waarop ik hiernaast het plaatje heb vormgegeven. Daar kom ik zo op terug, want dat is ook een kwestie van coderen. Hoe werkt het?
- Om te beginnen upload je een plaatje.
- In de code voor het plaatje geef je aan dat je gebruik maakt van een image map door de code usemap met een unieke naam
<img src=”plaatje” usemap=”#unieke-naam”> - Daaronder werk je de map uit door de gebieden (area’s) te benoemen die je wilt gebruiken om aan te klikken. Eerste geef je aan welke vorm je wilt dat dat gebied krijgt. Hiervoor heb je de keuze tussen
- een vierkant waarna je de coördinaten opgeeft van de linkerbovenhoek en de rechteronderhoek en de link waarnaar een klik verwijst
<br /><area href="link" shape="rect" coords="x1,y1,x2,y2"> - een cirkel, hierbij geef je de coördinaten op van het middelpunt en het aantal pixels van de straal
<br /><area href="link" shape="circle" coords="x,y,r"> - een polymorf figuur oftewel, alles wat je wilt tekenen met evenzoveel coördinaten. Voorwaarde is wel dat de eerste x y overeenkomt met de laatste, zodat er een afgesloten gebied ontstaat.
<area=""poly" herf="link" coords="x1,y1,x2,y2,xn,yn,.........,x1,y1">
- een vierkant waarna je de coördinaten opgeeft van de linkerbovenhoek en de rechteronderhoek en de link waarnaar een klik verwijst
Vervolgens kun je er nog een alt-tag bij doen voor het geval bij iemand het plaatje niet laadt en een title tag om een tekst te laten verschijnen als je op het die locatie gaat staan met de muis.
Voordeel is dat een image-map een gemakkelijke manier is die niet veel coderingsskills vraagt voor een leuk resultaat.
Nadeel is dat een image-map niet responsive is. In tegenstelling tot de vorige manier kun je hier wel een beetje mee valsspelen om een image-map toch responsive te laten lijken.
Om een image-map responsive te maken, gebruik je dezelfde techniek waarmee je gewone afbeeldingen responsive maakt; je definiëert in css verschillende afbreekpunten. Op deze afbreekpunten kun je dan een andere code laten zien. De afbreekpunten zijn dan de groottes van verschillende beeldschermen (mobiel, tablet, desktop evt. nog extra breekpunten). Bij de verschillende groottes beeldschermen hoort een ander grootte plaatje. Vervolgens zoek je de coördinaten op behorende bij die grootte behorende bij jouw plaatje (bijvoorbeeld door de website te inspecteren). Op die wijze is het dus alsnog mogelijk.
Dat heb ik hiernaast ook toegepast om het te laten zien. Nadeel is dat er vele verschillende groottes zijn van schermen en dat je dus geen relatieve coördinaten kunt opgeven. Het is daarmee dus niet de mooiste oplossing. Ook hoveren is op deze wijze niet mogelijk. Verder is het een relatief tijdrovende exercitie, zodat ik deze optie in meerdere opzichten niet aanraad als je een schaalbaar plaatje gebruikt (is het meestal).
Programmeren
Uiteraard is alles te programmeren. Echter is het de vraag of de kosten van het programmeren opwegen tegen de opbrengsten ervan. Ik denk van niet, zodat ik deze optie niet behandel maar gelijk doorga naar de volgende optie.
Plugin
Als je iets gangbaars wilt programmeren, dan is dat meestal ook al gebeurd door iemand. Heb je nu een website die gemaakt is op een platform (zoals WordPress), dan kun je dus ook gebruik maken van de programmeerkennis van anderen door het implementeren van een standaard code in de vorm van een plugin. Die heb ik toegepast aan de zijkant van stap 2 marktonderzoek Het voordeel van een plugin is dat het zeker goed gaat bij elk beeldschermformaat. Je kunt ook hoveren. De kosten zijn ook beduidend minder dan wanneer je het op een andere manier moet laten maken. Kortom, wil je een klikbaar plaatje, neem dan indien mogelijk een plugin.
Nieuwsgierig geworden naar mijn dienstverlening? Neem contact op!
E-mail:jxr-sem@google-deskundige.nl
[si-contact-form form=’1′]