Weblog Letem světem (aktualizováno) Náhrada textu obrázkem :: Weblog Letem světem

Archiv weblogu Letem světem z let 2002-2003


(aktualizováno) Náhrada textu obrázkem

Ačkoliv se obecně doporučuje nepoužívat pro textové nadpisy obrázku a jen nastylovat prostý text, v některých případech nám tato metoda přijde vhod. Může se jednat například o logotyp firmy, složitou kompozici nadpisu v obrázku či paličatého zákazníka. Obvykle se v těchto případech používá kombinace obrázku na pozadí a elementu span, který obsahuje samotný text nadpisu, je vložen přímo do nadpisu a skryt pomocí CSS pravidla display:none. Tento způsob náhrady textu například popisoval website Stopdesign na jaře tohoto roku. Dnes jsem ale nastudoval nový a daleko chytřejší postup. Stuart Langridge ve svém alternativním způsobu odbourává nutnost použití pomocného elementu a pomocí nulové výšky nadpisu s nenulovým paddingem (vnitřní odsazení obsahu elementu) dosahuje zcela shodného efektu. Samozřejmě se ale objevilo ALE a nikoho nepřekvapí, že to ALE existuje kvůli MSIE. Proto je třeba pro zachování kompatibility použít navíc malý hack, který eliminuje chybný box model v redmondském browseru. (zdroj Simon Willison)

Vloženo 7.8.2003: Yuhů mi ve svém spotu Špatné nahrazení obrázkem sice dává za pravdu v tom, že je správné používat text místo obrázkových nadpisů, ale vzápětí ukazuje hlavní nevýhodu výše zmiňované a opěvované techniky. Ta se projeví, pokud si uživatel vypne zobrazování obrázků. To není zase tak neobvyklý jev a v takovém případě vlastně čtenář neuvidí žádný nádpis - obrázek bude vypnutý a prostý text bude skryt kvůli nulové výšky elementu. Ano, tento problém jsem si původně vůbec neuvědomil. Proto své optimistické hodnocení oné metody degraduji na konstatování - ano, je to další ze zajímavých nápadů, ale nejlepší řešení to není. Z toho samého důvodu zřejmě nepomůže i vnitřní span skrývaný pomocí display:none. Nejlépe tedy celý problém řešit pomocí překrytí textového nadpisu obrázkem, jak je popsáno v komentářích tohoto spotu. Nebo poradíte lepší způsob?

7.8.2003 | 22:06 | přidal Lukin

Vaše názory

rony Napište autorovi komentáře Navštivte stránky autora komentáře

přidáno 5.8.2003 v 21:18

ostavam pri oramovani toho co chcem skryt SPANom. nemozem si byt isty, co buduce upravy v CSS vyvedu s nasilne zneviditelnym textom metodou "zmensi to co najviac" predpokladam, ze ak raz dam display:none uz naveky ziadny prehliadac nebude s interpretaciou CSS tohto typu spekulovat ;-)

Yuhů Napište autorovi komentáře Navštivte stránky autora komentáře

přidáno 6.8.2003 v 11:19

Technika popisovaná v článku je elegantní (nevyžaduje zásahy do HTML), ale je nešťastná. Pokud má totiž někdo vypnuté obrázky, nevidí na místě nadpisu vůbec nic.

Správně se to má dělat tak, že se neprůhledným obrázkem původní nápis překryje. Roboti a ti, kdo mají vypnuté obrázky, vidí původní nadpis, zbytek světa vidí obrázek. To samozřejmě vyžaduje zásah do html.

Vilém Málek Napište autorovi komentáře Navštivte stránky autora komentáře

přidáno 6.8.2003 v 12:02

Nechci se hádat, ale v textu popsaná metoda se mi jaksi instinktivně nezamlouvá (čti "jsem líný to zdůvodňovat technicky" ;-) IMHO je nejelepší metoda, kterou na svých stránkách popsal Pixy ;-)

Pavel Napište autorovi komentáře Navštivte stránky autora komentáře

přidáno 7.8.2003 v 10:45

No ja nevim - ja mam ve znacce nadpisu text a span s obrazkem na pozadi. V CSS pak dam obrazek nad text. Vysledek? Ve znacce nadpisu je text. Pri vypnutem CSS je textovy nadpis, pri nestahovani obrazku je opet textovy nadpis, pri "normalnim" nastaveni je tam obrazek. Tak to ale asi delate vsichni, co? :-)

Vít Dlouhý Napište autorovi komentáře Navštivte stránky autora komentáře

přidáno 7.8.2003 v 22:13

http://www.accessify.com/archives/2003_08_03_news-archives.asp#106016107246297283 - jsou tam odkazy na nějaké další postupy, které by měly vést ke stejnému cíli...

Weblog byl vytvářen publikačním systémem b2. Veškeré texty z archivu mohou jsou volně použitelné.