Obrázkové odkazy v CSS

Obrázkové odkazy pomocí CSS se využívají asi nejvíce u různých odkazů v podobě log. V případě použití stylů se zobrazí odkaz v podobě loga (obrázku) a v textové verzi už jen nadpis jako textový odkaz.

Zápis CSS a HTML:

stará verze:

#logo a { width: 83px;height: 30px; margin: 0px; padding: 0px;
 background: url("./logo.gif") top left no-repeat;
display:block; }
#logo a span { display:none; }

Pro vložení potom použijeme zápis:

<h3 id=“logo“> <a title=“Odkazy“ href=“../odkazy.html“> <span>Odkazy</span></a> </h3>

Proč to takto nepoužívat? Je neresponzivní, pro mobil na prd, a <span> je zbytečnej, když máme display none… ignorujou ho crawleři i čtečky nevidomých .. vidí jen prázdný odkaz, nevidomí jsou v hajzlu a crawleři tě srazí… (tak mi to řekl kámoš;)

Takže používejte tento zápis:

#logo img { max-width: 83px; height: auto; }

<h3 id="logo">
<a href="../odkazy.html"><img src="./logo.gif" width="83" height="30" alt="Odkazy"></a>
</h3>

Crawleři i čtečky vidí alt, tudíž odkaz dává smysl… max-width: 83px způsobí zmenšení obrázku při užším okně, height: auto ho upraví proporcionálně