Slike na spletni strani veliko prej pritegnejo pogled obiskovalca, kakor navaden tekst. Ravno zaradi tega so slike popolna izbira za povezave. V tem vodiču vam bom predstavil kodo, s katero lahko sliko določite, kot povezavo.

Slika, ki je določena za povezavo dobi prepoznavno modro obrobo. Spodnji del vodiča vam bo povedal, kako se te grde obrobe znebiti.

Če slike še ne znate vstaviti v HTML dokument si preberite vodič, ki govori o slikah in HTMLju.

Ko ste enkrat sliko vstavili, vam ne preostane nič drugega, kot, da ji določite še povezavo. Povezavo določite v znački <a> z atributom href="/ ". Značko <a> zaprete z </a>. Med ti dve vstavite sliko ( <img src="/slike/slika.png"> ).

HTML koda:

PRIKAZ slike, kot povezave

Kot vidite smo z href določili povezavo oz. URL do naslednje spletne strani. S src smo določili pot do slike.

Če bi sedaj to pustili, kakor je bi se slika obrobila z modro barvo. Nihče ne mara te modre obrobe. Znebite se jo lahko s kratko CSS kodo, ki odstrani obrobo.

HTML koda:

PRIKAZ slike, kot povezave, brez modre obrobe

border: none določa, da obrobe okoli slike ne sme biti.

Slike s povezavami lahko na strani uporabljate za različne namene. Najpogostejši in najučinkovitejši je zagoto meni s slikami, katerih povezave vas nato vodijo po strani. Privlačno sliko lahko uporabite, kot banner oz. pasico, ki poziva obiskovalce h kliku. Tako lahko usmerjate promet na vaše zanimive podstrani ali na kakšne druge spletne strani.

Slike s povezavami so s CSSjem izredno učinkovite, kot zanimive in dinamične galerije. S CSSjem bi tudi končal in vam ga z vsem srcem priporočal. S CSSjem lahko zelo vplivate na prikaz slike (obrobe, prosojnost, stil povezave, ... ).