HTML-koding for å forstørre bilder for nettsteder

Enten du lager et nettsted for å selge dine produkter eller bare vise frem hvor du gikk på ferie til dine venner, et bilde er verdt tusen ord. Inkludert dusinvis av store bilder på en side, men kan gjøre det føles rotete og frustrere brukere; løsningen er å vise mindre versjoner av bildene på siden din og bruke en enkel HTML-kode for å koble til de større.

Linking store bilder

Den grunnleggende måten å bruke HTML-kode for å forstørre et bilde er bare å koble til hvert stort bilde ved hjelp av en mindre versjon av det som kalles en "thumbnail". Når leserne klikker på et miniatyrbilde, det store bildet laster på skjermen deres; for å gå tilbake til forrige side, de bruker sine nettleserens "Back" -knappen. Denne koden gjør bruk av <a> og <img> HTML-koder.

<a href="&lt;img"> http://www.yoursite.com/largeimage.jpg">&lt;img knappen for å komme tilbake til der de var. Dette kan forvirre noen brukere, som kan lukke vinduet som inneholder stort bilde, og dermed har ingen måte å komme tilbake til forrige side. et alternativ er å åpne hver stort bilde i et annet vindu, selv om dette kan likeledes forvirre brukere som ikke legger merke til vindusåpningen og finne seg lurer på hvorfor deres "tilbake" knappen fungerer ikke. et annet alternativ er å lage en HTML-fil for hvert større bilde og link til denne HTML-fil i stedet for direkte til bildet. dette gjør det mulig å inkludere en link som fører tilbake til forrige side med hvert bilde, noe som gjør navigasjonen enklere .

Alternatives

Både CSS og Javascript tilbyr måter å forstørre bilder på samme side i stedet for å tvinge brukeren til å navigere til en ny. Ulempen med denne metoden er at den er avhengig av blant annet de store bildene i siden, men å holde dem skjult helt til brukeren med miniatyrer. Hvis mange av bildene er på siden, dette øker sidens lasting tid eksponentielt. Denne metoden virker kanskje ikke for lesere som besøker siden din bruker en eldre nettleser eller fra sine smarttelefoner.