{"id":3920,"date":"2019-08-09T16:34:24","date_gmt":"2019-08-09T14:34:24","guid":{"rendered":"https:\/\/google-deskundige.nl\/?p=3920"},"modified":"2020-12-04T13:13:55","modified_gmt":"2020-12-04T12:13:55","slug":"afbeelding-meerdere-links","status":"publish","type":"page","link":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/","title":{"rendered":"Hoe maak je een afbeelding met meerdere links?"},"content":{"rendered":"
Hoe krijg je verscheidene links in \u00e9\u00e9n plaatje?<\/h1>\n
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<\/p>\n
<a href=\"link\">plaatje + evt. tekst <\/a>.<\/xmp><br \/>\nMaar wat nu als je <strong>in \u00e9\u00e9n afbeelding meerdere links<\/strong> wilt hebben? Hoe doe je dat? Daar ga ik in deze blog op in.<br \/><\/p>\n<h2>Waarom meerdere links in een afbeelding?<\/h2>\n<div id=\"positief\">\n<ul>\n<li>Bijvoorbeeld voor <strong>visuele weergave voor navigatie<\/strong>. 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 \u00e9\u00e9n plaatje.<\/li>\n<li><strong>Mooiere layout<\/strong>. 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.<\/li>\n<li>Je maakt een <strong>compositieplaatje met verschillende producten<\/strong> 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 \u00e9\u00e9n 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. <xmp><a title=\"beschrijvende tekst\" href=\"link\"><\/a><\/xmp><\/li>\n<\/ul>\n<\/div>\n<br \/>\n<h2>Waarom geen meerdere links in een plaatje?<\/h2>\n<p>Er zijn ook een aantal argumenten om meerdere links in \u00e9\u00e9n plaatje te vermijden. Echter, deze redenen zijn volgens mij gemakkelijk te omzeilen.<\/p>\n<div id=\"negatief\">\n<ul>\n<li>Om te beginnen wordt het <strong>afgeraden om te gebruiken voor navigatie<\/strong> (zoals het plaatje hiernaast). Als je een dergelijk plaatje gebruikt is het niet altijd duidelijk dat het ook als menu klikbaar is. De <strong>User Experience is daarmee negatief<\/strong>.<strong>De oplossing is natuurlijk er ook voor te zorgen dat de desbetreffende pagina\u2019s ook op een andere wijze te benaderen zijn.<\/strong> 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.<\/li>\n<li><strong>Een image map<\/strong>, een mogelijke oplossing voor klikbare plaatjes, <strong>zou outdated zijn<\/strong>. Tsja, dat lijkt mij geen probleem maar een zienswijze en een keuze welke methodiek je zou willen gebruiken.<\/li>\n<li><strong>Een klikbaar plaatje kan trager laden<\/strong>. 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.<\/li>\n<\/ul>\n<\/div>\n<div id=\"positief\">\n<ul style=\"margin-top: 0px; margin-bottom: 0px; margin-left: 52px; padding-left: 0px;\">\n<li>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!<\/li>\n<li>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.<\/li>\n<li>Om een klikbaar plaatje te maken moet je code toevoegen. Hoe meer code je moet toevoegen, hoe trager het \u00e9\u00e9n 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\u00f6rdinaten in plaats van een cirkel)<\/li>\n<li>Het gebruik van <strong>lazy load<\/strong>.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.<\/li>\n<\/ul>\n<\/div>\n<br \/>\n<h2>Hoe maak je een klikbaar plaatje<\/h2>\n<p>Er zijn 4 mogelijkheden, waarvan ik er drie bespreek:<\/p>\n<ul>\n<li>layers<\/li>\n<li>image map<\/li>\n<li>programmeren<\/li>\n<li>plugin<\/li>\n<\/ul>\n<p>Ze hebben elk hun voors en tegens.<br \/><\/p>\n<h2>Klikbare afbeeldingen door het gebruik van layers<\/h2>\n<p>Het aanbrengen van laagjes (layers) op een plaatje wordt heel mooi uitgelegd in dit artikel: <a href=\"https:\/\/www.htmldrive.net\/items\/show\/704\/pure-CSS-Image-Maps\" target=\"_blank\" rel=\"noopener noreferrer\">www.htmldrive.net\/items\/show\/704\/pure-CSS-Image-Maps<\/a><br \/>\nMin of meer maak je een drietal laagjes bestaande uit een tweetal plaatjes en een laag met linkgebieden;<\/p>\n<ul>\n<li>Laag 1: Het eerste plaatje dat normaal te zien is<\/li>\n<li>Laag 2: Hier maak je gebieden door vormen te defini\u00ebren middels co\u00f6rdinaten<\/li>\n<li>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 \u00e9\u00e9nzelfde plaatje als het eerste, maar wat dan mogelijk anders is, is:\n<ul>\n<li>dat de kleur van het plaatje verschilt,<\/li>\n<li>de grootte van het uitgelichte gedeelte van het plaatje verschilt (meestal wat vergroot)<\/li>\n<li>er een kader of ander effect gecre\u00ebert wordt waardoor je ziet dat je daar hetzij iets kunt lezen hetzij kunt klikken<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>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\u00f6rdinaten overeenstemt met de plaatjes van laag 3.<br \/>\n<strong>Voordeel van deze afbeelding met links is dat het een css-oplossing is<\/strong>. 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.<br \/>\nEen ander <strong>voordeel is dat je heel mooi kunt hoveren<\/strong>. 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.<\/p>\n<p>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.<br \/>\n<img decoding=\"async\" alt=\"Een afbeelding met klikbare links door gebruik te maken van layers kan alleen als je het plaatje een absolute waarde meegeeft, daarmee is het niet mobielvriendelijk\" src=\"https:\/\/google-deskundige.nl\/media\/2019\/08\/resultaat-layers-css.jpg\"><br \/>\n<strong>Om deze afbeelding met klikbare links werkend te krijgen moet je je plaatje een absolute grootte meegeven<\/strong>. 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.<\/p>\n<div id=\"image-map\"><\/div>\n<br \/>\n<h2>Image map<\/h2>\n<p>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?<\/p>\n<ul>\n<li>Om te beginnen upload je een plaatje.<\/li>\n<li>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 <br \/><br \/>\n<span style=\"color:#81183d !important\"><img src=”plaatje” usemap=”#unieke-naam”><\/span><br \/><\/li>\n<li>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\n<ul>\n<li><strong>een vierkant<\/strong> waarna je de co\u00f6rdinaten opgeeft van de linkerbovenhoek en de rechteronderhoek en de link waarnaar een klik verwijst <xmp style=\"color:#81183d !important\"><br \/>\n<area href=\"link\" shape=\"rect\" coords=\"x1,y1,x2,y2\"><\/xmp><\/li>\n<li><strong>een cirkel<\/strong>, hierbij geef je de co\u00f6rdinaten op van het middelpunt en het aantal pixels van de straal <xmp style=\"color:#81183d !important\"><br \/>\n<area href=\"link\" shape=\"circle\" coords=\"x,y,r\"><\/xmp><\/li>\n<li><strong>een polymorf figuur<\/strong> oftewel, alles wat je wilt tekenen met evenzoveel co\u00f6rdinaten. Voorwaarde is wel dat de eerste x y overeenkomt met de laatste, zodat er een afgesloten gebied ontstaat. <xmp style=\"color:#81183d !important\"><area=\"\"poly\" herf=\"link\" coords=\"x1,y1,x2,y2,xn,yn,.........,x1,y1\"><\/xmp><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>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.<\/p>\n<p><strong>Voordeel is dat een image-map een gemakkelijke manier is die niet veel coderingsskills vraagt voor een leuk resultaat.<\/strong><br \/><\/p>\n<p><strong>Nadeel is dat een image-map niet responsive is<\/strong>. In tegenstelling tot de vorige manier kun je hier wel een beetje mee <strong>valsspelen om een image-map toch responsive te laten lijken<\/strong>. <br \/><br \/>\nOm een <strong>image-map responsive<\/strong> te maken, gebruik je dezelfde techniek waarmee je gewone afbeeldingen responsive maakt; <strong>je defini\u00ebert in css verschillende afbreekpunten<\/strong>. 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\u00f6rdinaten op behorende bij die grootte behorende bij jouw plaatje (bijvoorbeeld door de website te inspecteren). Op die wijze is het dus alsnog mogelijk.<br \/>\nDat 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\u00f6rdinaten 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).<br \/>\n<br \/><\/p>\n<h2>Programmeren<\/h2>\n<p>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.<br \/><\/p>\n<h2>Plugin<\/h2>\n<p><strong>Als je iets gangbaars wilt programmeren, dan is dat meestal ook al gebeurd door iemand.<\/strong> 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 <a href=\"Voorbeeld van het gebruik van een plugin zie je aan de zijkant bij stap 2 Marktonderzoek\" target=\"_blank\" rel=\"noopener noreferrer\">stap 2 marktonderzoek <\/a> 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.<\/p>\n<p>Nieuwsgierig geworden naar mijn dienstverlening? Neem contact op!<\/p>\n<p><a href=\"tel:0031337370161\">Tel: 033-7370161<\/a><\/p>\n<p><a title=\"Mail WordPress-specialist JXR SEM!\" href=\"mailto:jxr-sem@google-deskundige.nl\">E-mail:jxr-sem@google-deskundige.nl<\/a><br \/>\n[si-contact-form form=’1′]<\/p>\n<p><strong><\/strong><strong><\/strong><strong><\/strong><strong><\/strong><strong><\/strong><strong><\/strong><strong><\/strong><strong><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoe krijg je verscheidene links in \u00e9\u00e9n 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 plaatje + evt. tekst . Maar wat nu als je in \u00e9\u00e9n afbeelding meerdere … <a href=\"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/\" class=\"more-link\">Lees verder <span class=\"screen-reader-text\">Hoe maak je een afbeelding met meerdere links?<\/span> <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3926,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_joinchat":[]},"yoast_head":"\n<title>Hoe maak je een afbeelding met meerdere links? - JXR SEM<\/title>\n<meta name=\"description\" content=\"Wil je op je afbeelding verschillende links? Dat kan op verschillende manieren. Van image map tot layer, lees hier hoe je die links maakt in je afbeelding!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe maak je een afbeelding met meerdere links? - JXR SEM\" \/>\n<meta property=\"og:description\" content=\"Wil je op je afbeelding verschillende links? Dat kan op verschillende manieren. Van image map tot layer, lees hier hoe je die links maakt in je afbeelding!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/\" \/>\n<meta property=\"og:site_name\" content=\"JXR SEM\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/googledeskundige\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-04T12:13:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/google-deskundige.nl\/media\/2019\/08\/klik-image-map.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"270\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minuten\" \/>\n","yoast_head_json":{"title":"Hoe maak je een afbeelding met meerdere links? - JXR SEM","description":"Wil je op je afbeelding verschillende links? Dat kan op verschillende manieren. Van image map tot layer, lees hier hoe je die links maakt in je afbeelding!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/","og_locale":"nl_NL","og_type":"article","og_title":"Hoe maak je een afbeelding met meerdere links? - JXR SEM","og_description":"Wil je op je afbeelding verschillende links? Dat kan op verschillende manieren. Van image map tot layer, lees hier hoe je die links maakt in je afbeelding!","og_url":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/","og_site_name":"JXR SEM","article_publisher":"https:\/\/www.facebook.com\/googledeskundige","article_modified_time":"2020-12-04T12:13:55+00:00","og_image":[{"width":512,"height":270,"url":"https:\/\/google-deskundige.nl\/media\/2019\/08\/klik-image-map.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/","url":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/","name":"Hoe maak je een afbeelding met meerdere links? - JXR SEM","isPartOf":{"@id":"https:\/\/google-deskundige.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/#primaryimage"},"image":{"@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/#primaryimage"},"thumbnailUrl":"https:\/\/google-deskundige.nl\/media\/2019\/08\/klik-image-map.png","datePublished":"2019-08-09T14:34:24+00:00","dateModified":"2020-12-04T12:13:55+00:00","description":"Wil je op je afbeelding verschillende links? Dat kan op verschillende manieren. Van image map tot layer, lees hier hoe je die links maakt in je afbeelding!","breadcrumb":{"@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/#primaryimage","url":"https:\/\/google-deskundige.nl\/media\/2019\/08\/klik-image-map.png","contentUrl":"https:\/\/google-deskundige.nl\/media\/2019\/08\/klik-image-map.png","width":512,"height":270},{"@type":"BreadcrumbList","@id":"https:\/\/google-deskundige.nl\/afbeelding-meerdere-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Online Marketing v\/h MKB","item":"https:\/\/google-deskundige.nl\/"},{"@type":"ListItem","position":2,"name":"Hoe maak je een afbeelding met meerdere links?"}]},{"@type":"WebSite","@id":"https:\/\/google-deskundige.nl\/#website","url":"https:\/\/google-deskundige.nl\/","name":"JXR SEM","description":"dé Google deskundige","publisher":{"@id":"https:\/\/google-deskundige.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/google-deskundige.nl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/google-deskundige.nl\/#organization","name":"JXR SEM - Online Marketing Bureau","url":"https:\/\/google-deskundige.nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/google-deskundige.nl\/#\/schema\/logo\/image\/","url":"https:\/\/google-deskundige.nl\/media\/2019\/11\/jxrsemlogo.png","contentUrl":"https:\/\/google-deskundige.nl\/media\/2019\/11\/jxrsemlogo.png","width":300,"height":300,"caption":"JXR SEM - Online Marketing Bureau"},"image":{"@id":"https:\/\/google-deskundige.nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/googledeskundige"]}]}},"_links":{"self":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/3920"}],"collection":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/comments?post=3920"}],"version-history":[{"count":17,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/3920\/revisions"}],"predecessor-version":[{"id":4456,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/3920\/revisions\/4456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/media\/3926"}],"wp:attachment":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/media?parent=3920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}