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ě