Webbplatser är till skillnad från vilket kommunikationsmedium som kom före dem. En av de viktigaste sakerna som ställer in webbplatser från tidigare mediaformat som tryck, radio och även tv är begreppet "hyperlänk".
Hyperlänkar, som ofta också kallas "länkar", är det som gör webben så dynamisk. Till skillnad från en tryckt publikation som kan referera till en annan artikel eller annan resurs kan webbplatser använda dessa länkar för att faktiskt skicka besökare till de andra sidorna och resurserna. Inget annat sändningsmedium kan göra detta. Du kan höra en annons på radio eller visa på TV, men det finns inga hyperlänkar som kan ta dig till företagen i dessa annonser på samma sätt som webbplatsen enkelt kan göra. Länkar är verkligen ett fantastiskt kommunikations- och interaktionsverktyg!
Ofta är länkarna som finns på en webbplats textinnehåll som riktar besökare till andra sidor på samma webbplats. En webbplatss navigering är ett exempel på textlänkar i praktiken, men länkar behöver inte vara textbaserade. Du kan också enkelt länka bilder på din webbplats. Låt oss titta på hur detta görs, följt av några fall där du vill använda bildbaserade hyperlänkar.
Hur man länkar en bild
Det första du behöver göra är att placera bilden själv i ditt HTML-dokument. En gemensam användning av en bildbaserad länk är webbplatsens logotypsfil som sedan länkas tillbaka till webbplatsens hemsida. I vår exempelkod nedan är filen vi använder är en SVG för vår logotyp. Detta är ett bra val eftersom det gör att vår bild kan skala för olika upplösningar, samtidigt som bildkvaliteten bibehålls och en liten total filstorlek.
Så här placerar du din bild i HTML-dokumentet:
Runt bildtaggen lägger du nu ankarlänken, öppnar ankarelementet före bilden och stänger ankaret efter bilden. Det här liknar hur du skulle länka text, bara i stället för att lägga in de ord du vill vara länk till med ankarkoderna, du sätter ihop bilden. I vårt exempel nedan länkar vi tillbaka till vår hemsida hemsida, som är "index.html".
När du lägger till denna HTML på din sida, lägg inte några mellanslag mellan ankaretiketten och bildtaggen. Om du gör det kommer vissa webbläsare att lägga till små fästingar bredvid bilden, vilket kommer att se udda.
Logo-bilden skulle nu också fungera som en hemsida-knapp, vilket är ganska mycket en webbstandard dessa dagar. Observera att vi inte innehåller några visuella stilar, till exempel bredden och höjden på bilden, i vår HTML-markup. Vi lämnar dessa visuella stilar till CSS och upprätthåller en ren separation av HTML-struktur och CSS-stilar.
När du väl kommit till CSS kan de stilar du skriver för att rikta den här logotypen grafik inkludera storlekarna på bilden, inklusive lyhörda stilar för bilder med flera enheter, liksom alla visuella bilder du vill lägga till i bilden / länken, som gränser eller CSS släpp skuggor. Du kan också ge din bild eller länka ett klassattribut om du behövde ytterligare "krokar" att använda med dina CSS-stilar.
Använd fall för bildlänkar
Så att lägga till en bildlänk är ganska lätt. Som vi just har sett är allt du behöver göra att pakka in bilden med lämpliga ankare. Din nästa fråga kan vara "när skulle du faktiskt göra det i praktiken förutom den ovan nämnda logotypen / hemsidan länksexempel?"
Här är några tankar:
- Miniatyrbilder i ett galleri som länkar till större versioner av dessa bilder.
- Bilder som används ensamma för att representera innehåll, som produktbilder för en e-handelswebbplats.
- Teaser bilder som ingår i annat innehåll, som en bloggartikel eller pressmeddelande, som lockar folk att märka det innehållet ger dem ett målområde för att knacka på eller klicka för att läsa hela artikeln.
- Ikonbilder som används som knappar för att ansluta till specifik funktionalitet eller sidor på webbplatsen.
- Sociala medier länkar som använder de igenkännbara logotyperna på olika sociala medier webbplatser som är viktiga för den webbplatsen eller företaget.
- Bilder som används som knappar för viss funktionalitet, som formulärinsändningar (bästa praxis notering - från en webbplats prestanda perspektiv, knappar stylade rent med CSS är ett bättre val än bildknappar).
En påminnelse när du använder bilder
Bilder kan spela en viktig roll i en webbplatss framgång. Ett av de ovan angivna exemplen använder bilder tillsammans med annat innehåll för att uppmärksamma innehållet och få folk att läsa det.
När du använder bilder måste du vara uppmärksam på att välja rätt bild för dina behov, inklusive korrekt bildämne, format och se till att alla bilder som du använder på din webbplats är korrekt optimerade för leverans på webbplatsen. Det kan tyckas som mycket arbete bara för att lägga till bilder, men utbetalningen är värt det! Bilder kan verkligen lägga till så mycket för en webbplatss framgång.
Tveka inte att använda lämpliga bilder på din webbplats och länka dessa bilder när det behövs för att lägga till något interaktivt i ditt innehåll, men var också uppmärksam på dessa bästa bilder och använda dessa grafik / länkar korrekt och ansvarsfullt i ditt webbdesignarbete.
