Náhrada textu obrázkem – šetříme kód
Image replacement budiž věčné téma, ke kterému se vracím co půl roku. Tentokráte s tipem pro ušetření nadbytečného CSS kódu.
Při aplikaci náhrady textu obrázkem používám většinou Gilder/Levin Method, která ovšem obsahuje docela dost CSS kódu, který se z velké části opakuje. V jednom z posledních projektů jsem si na sebe svým vlastním grafickým návrhem ušil bič v podobě asi třiceti různých obrázkových nadpisů (příště jedině sIFR), a tak jsem byl nucen popřemýšlet nad ušetřením přebytečného kódu.
Řešení: zavedeme dodatečnou třídu, do které schováme opakující se kód a jednotlivé obrázky budeme rozlišovat pomocí IDčka. Vznikne nám tedy něco takového:
<h1 id=‚nadpis‘
class=‚imgr‘>Nadpis<span></span></h1>
.imgr, .imgr span {
position: relative;
display: block;
padding: 0;
left: 0;
top: 0;
overflow: hidden;
}
.imgr span {
position: absolute;
}
Jednotlivým ID pak nadefinujeme unikátní výšku, šířku a obrázek:
#nadpis, #nadpis span {
width: 100px;
height: 100px;
}
#nadpis span {
background: url(../images/nadpis.gif) 0 0 no-repeat;
}
Komentáře
Já nechápu jednu věc. Proč jste normálně nepoužil obrázky s Alty?
Pokud jde o designove prvky, tak je normální že se dávají do css. Tak aby jsme oddělily obsah od designu, a zároveň se to pořád netahalo.
U nadpisu, jelikož jde o obsah, tak si myslím by bylo vhodnější umístit to jako obrázek s altem?
SIFR rozhodně není samospasitelný a občas je s ním více starostí než je záhodno (zalamování, víceméně neuhlídatelná velikost, rozdíly ve vykreslování mezi browsery atd. atd.).
Jako ideální mi přijde právě náhrada textu obrázkem ideálně kombinovaná s automatickým generováním těchto obrázků z PHP (či jiného skriptojazyka).
Filovo šetření kódu je celkem použitelné :)
Nemám Flash.. ale už na něj šetřím.. jen těch 60k (Design Suite) jde prostě trošku pomalu..
Heh – tak přesně tohle jsem řešil asi před 30 minutama … a výsledek:
#uvod, #web, … {position:relative; overflow:hidden; background:#f4f4f4; text-align:center; }
#uvod span, #web span, … {display:block; position:absolute; left:0; top:0;
z-idenx:1; width: 100%; height: 100%;}
#uvod a:hover, #web a:hover … {cursor:pointer;}
#uvod{width:62px;height:130px;}
#uvod span { background:url(„../i/menu-uvod.gif“) 0 0 no-repeat;}
#uvod a:hover span,#uvod #active span{background-position: –61px 0;}
Škoda jen, že jsem si tenhle článek přečetl až tehdy, když jsem to „zoptimalizoval“ :)).
P.S.: tohle řešení je samozřejmě pro rollover.
S prominutím přijde mi to jako objev Ameriky, navíc nevím proč spanu pokaždé dávat unikátní rozměry.
.imgr span {
position: absolute;
width: 100%;
height%;
}
a je vymalováno, ne?
Nějak vypadl závěr, samozřejmě mělo být
height: 100%;
Jirko, poneváč do altu nedáš háčko (například)
FILOSOF: On ten sIFR jde vytvořit i bez Flashe.
Tady jsou nějaké připravené fonty
http://www.isarie.com/?p=17
a tady je generátor potřebných swf
http://ianpurton.com/sifr/
Možná jsou lepší někde tady ;)
http://www.google.com/search?…
Ale s těma problémama se zalamováním a velikostí má soundake pravdu. Ale zase tam moc sIFRování jsem ještě nedělal, tak nevím jistě.
Jako obvykle, sIFR mohu jen nedoporučit. Opakuji to už nejspíš roky a asi to budu opakovat stále – na některých naprosto standardních sestavách nefunguje, nikdy nefungoval a pochybuji, že někdy fungovat bude. Viz například http://interval.cz/…xtu/diskuse/#… ;-)
Taky mám se sIFRem pouze negativní zkušenosti, zatím se mi nikdy nepodařilo použít ho tak abych byl plně spokojený a nakonec jsem vždy skončil u filovy metody ;)
Z posledného komentáru nejak vypadla Texy! code syntax (určite som ju zadal správne), skúsim znovu bez Texy.
Človek by ani nečakal, aké môže byť zložité zapísať HTML kód do komentáru. Takže posledný pokus do tretice.
<h1><img src=„images/cucoriedky.gif“ alt=„cucoriedky“></h1>
Osobne je mi ten sIFR proti srsti, mohl by jeste nekdo shrnout vsechny jeho nedostatky? :-) Nahradu obrazkem mam mnohem radsi :-)
Josef Benko
A fakt je to pak plnohodnotná h1? Jestli jo, tak na tu původní otázku [2] by mě zajímala odpověď.
[16] Já si, podle svých znalostí myslím, že to ekvivalentní není. Stejně jako obrázek s odkazem, který má alt nastavený na nějaký KW není AFAIK stejný jako pokud je ten KW přímo text.
Ale obávám se, že nemám žádný exaktní důkaz.
Obrázek s altem má vždy nižší váhu než text.. logicky – můžeš si do altu nacpat cokoliv..
Výborně, skoro jsem se už chtěl leknout…
A co nahrada textu flashem alias SIFR? ;-)