Websites zijn anders dan elk communicatiemedium dat hen te wachten stond. Een van de belangrijkste dingen die websites onderscheidt van eerdere media-indelingen zoals print, radio en zelfs televisie, is het concept van de "hyperlink".
Hyperlinks, ook gewoon bekend als "links", maken het web zo dynamisch. In tegenstelling tot een gedrukte publicatie die naar een ander artikel of andere bron kan verwijzen, kunnen websites deze koppelingen gebruiken om bezoekers daadwerkelijk naar die andere pagina's en bronnen te sturen. Geen enkel ander broadcast-medium kan dit doen. U kunt een advertentie op de radio of op tv horen, maar er zijn geen hyperlinks die u naar de bedrijven in die advertenties kunnen leiden zoals de website dat gemakkelijk kan doen. Links zijn echt een geweldige communicatie- en interactietool!
Vaak zijn de links op een website tekstinhoud die bezoekers naar andere pagina's van dezelfde site leidt. De navigatie van een website is in de praktijk een voorbeeld van tekstlinks, maar links hoeven niet op tekst te zijn gebaseerd. U kunt ook gemakkelijk afbeeldingen op uw website linken. Laten we eens kijken hoe dit wordt gedaan, gevolgd door enkele gevallen waarin u op afbeeldingen gebaseerde hyperlinks zou willen gebruiken.
Hoe een afbeelding te koppelen
Het eerste dat u moet doen is de afbeelding zelf in uw HTML-document plaatsen. Een algemeen gebruik van een op afbeeldingen gebaseerde koppeling is de logo-afbeelding van de site die vervolgens weer wordt gekoppeld aan de startpagina van de site. In onze voorbeeldcode hieronder is het bestand dat we gebruiken een SVG voor ons logo. Dit is een goede keuze, omdat het ons in staat zal stellen om te schalen voor verschillende resoluties, terwijl de beeldkwaliteit en een kleine algehele bestandsgrootte gehandhaafd blijven.
Zo zou u uw afbeelding in het HTML-document plaatsen:
Rond de afbeeldingstag zou je nu de ankerlink toevoegen, het ankerelement vóór de afbeelding openen en het anker na de afbeelding sluiten. Dit is vergelijkbaar met hoe u tekst zou linken, alleen wikkelt u de afbeelding in plaats van de woorden om te slaan die u een koppeling met de ankertags wilt zijn. In ons onderstaande voorbeeld verwijzen we terug naar de startpagina van onze site, die 'index.html' is.
Wanneer u deze HTML aan uw pagina toevoegt, mag u geen spaties tussen de ankertag en de afbeeldingstag plaatsen. Als u dat doet, voegen sommige browsers kleine vinkjes toe naast de afbeelding, wat er vreemd uitziet.
Het logo-beeld zou nu ook fungeren als een homepageknop, wat tegenwoordig een beetje een webstandaard is. Merk op dat we geen visuele stijlen, zoals de breedte en hoogte van de afbeelding, opnemen in onze HTML-markup. We laten deze visuele stijlen over aan CSS en houden een schone scheiding aan tussen HTML-structuur en CSS-stijlen.
Zodra u CSS hebt bereikt, kunnen de stijlen die u schrijft om deze logoafbeelding te targeten de grootte van de afbeelding omvatten, inclusief responsieve stijlen voor afbeeldingen met meerdere apparaten en alle afbeeldingen die u aan de afbeelding / koppeling wilt toevoegen, zoals randen of CSS laat schaduwen vallen. U kunt ook uw afbeelding geven of een klassenattribuut koppelen als u extra "hooks" nodig hebt om te gebruiken met uw CSS-stijlen.
Use Cases for Image Links
Dus het toevoegen van een afbeeldingslink is vrij eenvoudig. Zoals we zojuist hebben gezien, hoeft u alleen de afbeelding in te pakken met de juiste ankertags. Uw volgende vraag kan zijn "wanneer zou u dit in de praktijk doen, naast het bovengenoemde voorbeeld van een logo / homepaginalink?"
Hier zijn enkele gedachten:
- Miniatuurafbeeldingen in een galerij die linken naar grotere versies van die afbeeldingen.
- Afbeeldingen die alleen worden gebruikt om inhoud weer te geven, zoals productfoto's voor een e-commerce website.
- Teaserafbeeldingen die deel uitmaken van andere inhoud, zoals een blogartikel of persbericht, die mensen ertoe brengen te merken dat inhoud hen een doelgebied geeft waarop ze kunnen tikken of klikken om het volledige artikel te lezen.
- Pictogramafbeeldingen die worden gebruikt als knoppen om verbinding te maken met specifieke functionaliteit of pagina's binnen de site.
- Social media-links die gebruikmaken van de herkenbare logo's van de verschillende sociale-mediasites die belangrijk zijn voor die site of dat bedrijf.
- Afbeeldingen die worden gebruikt als knoppen voor bepaalde functies, zoals het indienen van formulieren (aantekening beste praktijken - vanuit het oogpunt van de prestaties van een website, zijn knoppen die uitsluitend zijn gestileerd met CSS een betere keuze dan afbeeldingsknoppen).
Een herinnering bij het gebruik van afbeeldingen
Afbeeldingen kunnen een belangrijke rol spelen in het succes van een website. Een van de hierboven genoemde voorbeelden is het gebruik van afbeeldingen naast andere inhoud om de aandacht op die inhoud te vestigen en mensen ertoe te brengen het te lezen.
Wanneer u afbeeldingen gebruikt, moet u er bewust voor kiezen om de juiste afbeelding voor uw behoeften te selecteren, dit omvat de juiste afbeeldingsonderwerp, indeling en ook ervoor te zorgen dat alle afbeeldingen die u op uw website gebruikt, correct zijn geoptimaliseerd voor het leveren van de website. Dit lijkt misschien heel veel werk alleen maar om afbeeldingen toe te voegen, maar de uitbetaling is het waard! Afbeeldingen kunnen echt zoveel toevoegen aan het succes van een site.
Aarzel niet om de juiste afbeeldingen op uw site te gebruiken en koppel deze afbeeldingen indien nodig om wat interactief aan uw inhoud toe te voegen, maar houd ook rekening met deze beeldbest practices en gebruik deze afbeeldingen / links correct en verantwoordelijk in uw webontwerpwerk.
