Diskuse: Rollover 3krát jinak podle XHTML a CSS
Zdravim,
vyraz "rollover" ve smyslu preklapejicich se obrazku, se v CR preklada jako "rolecek" ;-]
vyraz "rollover" ve smyslu preklapejicich se obrazku, se v CR preklada jako "rolecek" ;-]
Hehe, to jsem nevedel, ze mam pribuzneho jmenem Rollover :)
"Rolecek" ??? :-))) To zni skutecne kouzelne...
Text clanku je (bohuzel) dost zavadejici, bez vyhrad lze vlastne souhlasit jen s vyctem vyhod CSS-rolloveru. Vzhledem k tomu, ze podobne clanky pouzivaji jako svuj vzor zejmena zacatecnici, neni IMHO prilis povedeny.
Hned v uvodu se zminujete o dodrzovani standardu - proc tedy u IMG neuvadite povinny atribut ALT?
Ad. reseni 1: Mate pravdu, Opera 6 sice ignoruje vlastnost "background-image" pro IMG, nikoliv vsak pro A. Reseni je nasnade - definovat pozadi pro A a pomoci invisible-gifu v IMG provest jenom vymezeni odkazu.
Ad. reseni 2: Naprosto NEPOUZITELNE v prohlizeci s vypnutym zobrazovanim obrazku a v textovem prohlizeci. Zcela zasadni chyba!
Ad. reseni 3: Tohle neni prakticky vyuzitelne. Daleko lepsi je pouzit reseni 1, pripadne vse jeste zavrit do jineho elementu s pseudotridou :hover (kde by take bylo definovano zakladni pozadi misto v elementu A). Zapomente ovsem na Operu ;-)
Muj zaver je: CSS-rollovery jsou daleko efektivnejsi nez JS, ovsem je nutne se smirit s faktem, ze korektne funguji jen v Gecku a IE (uvidime, jak na tom bude Opera 7). Kazdopadne funkcnost navigace NESMI byt postavena na funkcnosti rolloveru; pokud to nekdo dela, nemusi ztracet cas ctenim podobnych clanku ;-) Rollover je zkratka jenom takova graficka ficurka a kdyz nefunguje, nic se vlastne nedeje... :-)
Hned v uvodu se zminujete o dodrzovani standardu - proc tedy u IMG neuvadite povinny atribut ALT?
Ad. reseni 1: Mate pravdu, Opera 6 sice ignoruje vlastnost "background-image" pro IMG, nikoliv vsak pro A. Reseni je nasnade - definovat pozadi pro A a pomoci invisible-gifu v IMG provest jenom vymezeni odkazu.
Ad. reseni 2: Naprosto NEPOUZITELNE v prohlizeci s vypnutym zobrazovanim obrazku a v textovem prohlizeci. Zcela zasadni chyba!
Ad. reseni 3: Tohle neni prakticky vyuzitelne. Daleko lepsi je pouzit reseni 1, pripadne vse jeste zavrit do jineho elementu s pseudotridou :hover (kde by take bylo definovano zakladni pozadi misto v elementu A). Zapomente ovsem na Operu ;-)
Muj zaver je: CSS-rollovery jsou daleko efektivnejsi nez JS, ovsem je nutne se smirit s faktem, ze korektne funguji jen v Gecku a IE (uvidime, jak na tom bude Opera 7). Kazdopadne funkcnost navigace NESMI byt postavena na funkcnosti rolloveru; pokud to nekdo dela, nemusi ztracet cas ctenim podobnych clanku ;-) Rollover je zkratka jenom takova graficka ficurka a kdyz nefunguje, nic se vlastne nedeje... :-)
Dobry den,
vynechani atributu ALT je moje blbost, za coz se omlouvam. Pochopitelne mate pravdu, dekuji za upozorneni. V ukazkovem prikladu uz tento atribut je, ale bohuzel jsem jej zapomnel doplnit i do clanku.
Jinak bohuzel si nejsem zcela jisty, jestli jste muj clanek zcela pochopil. Nechtel jsem napsat clanek "Jak vytvorit CSS Rollover", ale spise polemiku na tema, zdali se da dnes uspesne nahradit Javascript pomoci CSS. (viz. perex clanku: "V poslední době se často setkávám na různých webech s názorem, že známý Rollover se dá zcela nahradit kombinací XHTML a CSS. Podívejme se tedy, jak je to ve skutečnosti.")Prvni moznost tvorby je pomerne casto zminovana na ruznych forech/webech o webdesignu. Bohuzel je nepouzitelna pro Operu. Dalsi dve moznosti jsem si vymyslel ve snaze najit alternativu. Bohuzel ani to se prilis nepovedlo. Proto jsem dosel k zaveru, ze zatim je vyhodnejsi Javascript rollover.
Dekuji za reakci,
autor
vynechani atributu ALT je moje blbost, za coz se omlouvam. Pochopitelne mate pravdu, dekuji za upozorneni. V ukazkovem prikladu uz tento atribut je, ale bohuzel jsem jej zapomnel doplnit i do clanku.
Jinak bohuzel si nejsem zcela jisty, jestli jste muj clanek zcela pochopil. Nechtel jsem napsat clanek "Jak vytvorit CSS Rollover", ale spise polemiku na tema, zdali se da dnes uspesne nahradit Javascript pomoci CSS. (viz. perex clanku: "V poslední době se často setkávám na různých webech s názorem, že známý Rollover se dá zcela nahradit kombinací XHTML a CSS. Podívejme se tedy, jak je to ve skutečnosti.")Prvni moznost tvorby je pomerne casto zminovana na ruznych forech/webech o webdesignu. Bohuzel je nepouzitelna pro Operu. Dalsi dve moznosti jsem si vymyslel ve snaze najit alternativu. Bohuzel ani to se prilis nepovedlo. Proto jsem dosel k zaveru, ze zatim je vyhodnejsi Javascript rollover.
Dekuji za reakci,
autor
Jen bych dodal že příklad 3. nefunguje na IE5, tedy rollover efekt funguje, ale odkaz je přístupný pouze z klávesnice, nikoli myší...
Je možné ho upravit předefinováním stylů pomocí javascriptu, na:
display:inline;
width:auto;
height:auto;
ale předefinání musí být jen pro IE5. Pro uživatele s IE5 a vypnutým javascriptem bude odkaz nepřístupný :-(
Docela by mne zajímalo, jak to vypadá v IE4
Je možné ho upravit předefinováním stylů pomocí javascriptu, na:
display:inline;
width:auto;
height:auto;
ale předefinání musí být jen pro IE5. Pro uživatele s IE5 a vypnutým javascriptem bude odkaz nepřístupný :-(
Docela by mne zajímalo, jak to vypadá v IE4
Ano, bohuzel mate pravdu, jedna se o bug IE5.0... Pokud predefinujete element A na blokovy, odkaz je funkcni. Pokud k tomu vsak soucasne pridate definici rozmeru tohoto elementu, pak neni odkaz pristupny mysi. :-(
Pred 1/4 rokem jsem dal dohromady stranku pro zdokumentovani tohoto bugu - bude-li zajem, mohu ji vecer uploadovat na nas server a zverejnit link...
Ad. IE4 - je OT o nem uvazovat; toho "zmetka" je nejlepsi odriznout od stylesheetu a predlozit mu jen ciste a strukturovane XHTML ;-)
Pred 1/4 rokem jsem dal dohromady stranku pro zdokumentovani tohoto bugu - bude-li zajem, mohu ji vecer uploadovat na nas server a zverejnit link...
Ad. IE4 - je OT o nem uvazovat; toho "zmetka" je nejlepsi odriznout od stylesheetu a predlozit mu jen ciste a strukturovane XHTML ;-)
No ja bych zajem mel, pokud to staci ,-)
Omlouvam se, nechtelo se mi nic delat, takze jsem to dal na web az v sobotu odpoledne - test najdete na linku http://www.webface.cz/test/.
Potreboval by som vseobecne nejake rozumne riesenie zdanlivo trivialneho problemu: rollover button, ktory bude mat dva podkladove obrazky - normal.gif a hover.gif + parameter - napis. Pripada mi trochu chore vyrabat pre kazdy button na stranke dva samostatne obrazky, ked jedine, co sa tam meni je ten podklad.
Zatial som nenasiel nieco take BEZ JAVY.
Zatial som nenasiel nieco take BEZ JAVY.
Pridal som v tretom priklade obrazku atributy
vspace="1" hspace="1"
V tomto pripade nemusi byt obrazok priehladny. Po nabehnuti mysou sa okolo obrazka zobrazi ramcek nadefinovanej farby. Kuzelne :)
vspace="1" hspace="1"
V tomto pripade nemusi byt obrazok priehladny. Po nabehnuti mysou sa okolo obrazka zobrazi ramcek nadefinovanej farby. Kuzelne :)
Ad. "Ad. reseni 2: Naprosto NEPOUZITELNE v prohlizeci s vypnutym zobrazovanim obrazku a v textovem prohlizeci. Zcela zasadni chyba!" - usíme si uvědomit co jeto vlastně rollover ;-) Rollover je změna barvy/obrázku odkazu na jinou barvu/obrázek, což vlastně vylučuje použití tohoto efektu v textových prohlížečích ne?
