Starší komentáře ke článku: Rollover 3krát jinak podle XHTML a CSS
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 13.9.2003 0:31:01
Nejak mi unika tohle reseni. Je to pekne, ale prece jen pixy na svem blogu (<a href='http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/' target='_blank'>http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a> ) predvadi podstatne lepsi reseni nez vetsina zde nastinenych.
Datum vložení: 13.9.2003 1:34:24
Odkazovane pixyho reseni neni v nicem lepsi, prave naopak jsou obe nedostatecne.
Pixyho reseni prekryva obrazek textem, coz je ve vetsine pripadu nezadouci. Naopak tohle reseni nepocita s variantou, kdy ma uzivatel vypnute zobrazovani obrazku (a jeho browser zpracovava CSS - coz je docela casta kombinace).
Datum vložení: 13.9.2003 2:34:09
Ten vas komentar k pixyho reseni jsem teda opravdu nepochopil. Pixyho reseni je naopak velmi elegantni. To co ukazuje je naopak pouzitelne temer kdykoli - at jiz pri stejnych nebo ruznych obrazcich (bud menite jen bg nebo rovnou cely obrazek se vsim vsudy).
Navic date-li dovnitr span s textem ktery bude neviditelny, muzete snadno osetrit i prohlizece bez css.
Datum vložení: 13.9.2003 8:32:10
Me se teda to Pixyho reseni taky moc nelibi. Konkretne to, ze vyzaduje fixni velikost (zejmena pisma) vsech odkazu, povazuju za dost vyraznou nevyhodu. I kdyz zase to odstraneni preloadu je moc hezky.
Datum vložení: 13.9.2003 8:44:46
Pixyho reseni asi nebude tak spatne...
<a href='http://simon.incutio.com/archive/2003/09/10/jsFreeRollovers' target='_blank'>http://simon.incutio.com/archive/2003/09/10/jsFreeRollovers</a>
Datum vložení: 13.9.2003 11:04:08
Pokud chcete mit odkaz graficky, tak vetsinou musi mit nejakou fixni velikost, alepson v danych mezich. Podle me to taky neni na odkazy v textu (pokud je dnes jeste nekdo pouziva), ale v menu. Leo
Datum vložení: 13.9.2003 17:21:33
Uh pepaku, pro prumerne inteligentni opici neni nejmensi problem pixyho reseni upravit tak aby bylo funkcni i pri variabilni vysce. Konkretne do toho boxu dat pozadi ktere bude mit napr. jen horni cast - a vlozit do nej druhy box ktery by zase drzel to spodni.
Ma to jistou mouchu na kterou si zase clovek muze dojit jistou logickou uvahou ale i tak to zdaleka neni takovy problem.
Datum vložení: 13.9.2003 20:08:50
To se ale pak stezi da oznacit za univerzalni reseni, ze? A zrovna moc semanticky cisty to taky nebude.
Datum vložení: 13.9.2003 21:38:39
Co je na tom proboha semanticky necisteho? span je formatovaci prvek, nic vic takze vysledek nijak negativne neovlivni - je to uplne stejne jak kdyby tam nebyl.
Datum vložení: 26.10.2003 12:44:14
pokud se na to pixyho reseni poradne podivate, pak je jasne ze fixni velikost textu nepotrebuje. Text tam nemusite mit (zobrazen) vubec zadny, mohou to byt normalni obrazky.
Nicmene to nic nemeni na faktu, ze dost instalaci IE je nastaveno tak, aby reloadovalo obrazek po kazdem najeti.
Takze na CSS rollovery bych se vykaslal a delal to klasicky pres JS a preload.
Datum vložení: 13.9.2003 12:52:09
Obávám se, že jste Pixyho řešení nepochopil správně, protože jinak byste nemohl napsat, že překrývá obrázek textem. Pixy ve svém příkladu naopak podkládá text (který je základem menu) obrázkem na pozadí. Pokud ovšem v konkrétním případě nepovažujete text za základ odkazu, vůbec ho tam nemusíte mít a můžete místo něj použít třeba ten průhledný obrázek s ALTem uváděný v tomto článku.
Datum vložení: 13.9.2003 14:13:12
Doposud ale nikdo nenapsal, vcem je opravdu ta Pixiho varianta lepsi.
A pritom to stroji hned v titulku stranky "Fast rollovers, no preload needed".
Pixy pouzil jeden obrazek pro css background, ktery ve skutecnosti obsahuje 3 varianty tlacitka (off/on/active) a meni je tim, ze posunuje umisteni obrazku na pozadi.
Ve zdejsim clanku zminovana varianta nema osetren preload druheho (hover) obrazku, takze kdyz na nej user ukaze mysi, musi zpravidla pockat, nez se obrazek stahne ze serveru. U Pixyho verze tomu tak neni. A predevsim vtom je Pixiho reseni lepsi.
Neduhy css roloveru maji pochopitelne oba.
Datum vložení: 13.9.2003 14:51:59
Zacinam mit pocit ze kazdy pise o jinem pixyho reseni. Presny odkaz? Leo
Datum vložení: 14.9.2003 13:04:11
Pane Prokope, povazuji vyjadreni "podlozit text obrazkem" a "prekryt obrazek textem" za totez, proste text je vzdy (v ose "z") umisten nad obrazkem. Vase vyjadreni je sice presnejsi v logice CSS, nicmene vizualni vysledek je tentyz.
Vámi uvedená možnost použití průhledného obrázku s ALTem má taky slabé místo: Co když browser zobrazuje obrázky, ale nezpracuje správně CSS? Pak neuvidím vůbec nic. Navíc tak musím do HTML přidávat kód, který nemá žádnou informační hodnotu a souvisí jen s formátováním.
Za ideální CSS rollover tudíž považuji ten, který
1) bez CSS zobrazí text
2) bez zobrazování obrázků zobrazí text
3) při zobrazování obrázků a CSS zobrazí správně obrázek - "spravně" myslím zobrazení JEN obrázků (a ne textu přes něj).
Jedinné řešení, které mě v této souvislosti napadá je vytvořit DIV s rozmery obrázku, který bude obsahovat:
obrazek: <a href="...." id="obrazek"></a>
a text: <a href="...totez...">alternativní text</a>
s tim, ze pro id="obrazek" bych urcil pravidla
- position: absolute; - aby "neubiral" prostor nasledujicimu textu
- display: block;
- width: 100%; height: 100%; - rozmery obrazku ma jiz nadrazeny DIV
- z-index: 1; - aby byl umisten pred alternativnim textem
- margin: 0;
zkousel jsem to v praxi, a funguje to bezvadne. Jedinna nevyhoda reseni je, ze tutez kotvu <A> musime uvest dvakrat, jednou pro text, jednou pro obrazek. Mozna i to by se dalo sofistikovanejsim resenim eliminovat.
Datum vložení: 14.9.2003 13:16:45
'jedinna nevyhoda...' no to je fakt kulantne receno. Ted vypnete styl a reknete mi co si myslite o tvurci ktery to vyrobi takhle.
Zkuste se zamyslet nad tim ze pixy tam naznacil PREDEVSIM jak to resit kdyz mate textovy odkaz a graficke pozadi (buttonek). Myslim si ze mou navrhnute reseni se spanem je podstatne lepsi nez to co pachate vy.
Datum vložení: 14.9.2003 15:29:39
Me se pro kompletne graficky button osvedcilo jeste jedno reseni:
<a href="">Text odkazu<span></span></a>
a - display:block s rozmery obrazku, position: relative
span - ma pozadi s z-index: 1, positon: absolute, top left
:hover je delany posouvanim pozadi jako v pripade pixyho
Datum vložení: 14.9.2003 16:32:21
A kdyz pretece?
Datum vložení: 14.9.2003 16:49:00
Tak jeste jednou. Spolehani na obrazek jako background-image je sice pekny, ale kdyz takovou stranku ulozis na disk, tak se neulozi ten obrazek a neuvidim ani text, protoze styly se pouziji.
Pixy ma pokud vim alespon dva graficke odkazy - jeden spociva v tom, ze obr. je na pozadi, a pri :hover se posouva, druhy resi to, ze muzu mit vypnute obrazky a dava obrazek nad odkaz tak, ze ho prekryje....
Datum vložení: 14.9.2003 16:53:37
Konkretne vim o techto:
<a href='http://pixy.cz/blogg/web/2003_07_01_archiv.html#1057659454' target='_blank'>http://pixy.cz/blogg/web/2003_07_01_archiv.html#1057659454</a>
<a href='http://pixy.cz/blogg/web/2003_02_01_archiv.html#1045581000' target='_blank'>http://pixy.cz/blogg/web/2003_02_01_archiv.html#1045581000</a>
a kazdy asi mluvime o necem jinem... Leo
Datum vložení: 14.9.2003 16:52:17
V prikladu, ktery jsem uvadel, jsem zapomel napsat, ze onen rodicovky DIV bude mit overflow:hidden; - pote preteceni neni problem. Pri vypnutem CSS take neni problem se zobrazenim.
Datum vložení: 14.9.2003 17:01:48
Pretekani prece musis osetrit u vsech odkazu, ktery maji byt jako graficky tak textovy... Leo
Datum vložení: 14.9.2003 16:50:14
Jenze span:hover nebere IE :-( Proto ta dvoji kotva <A> v mem priklade
Datum vložení: 14.9.2003 17:43:07
A co a:hover span? ;)
Datum vložení: 14.9.2003 18:58:38
To IE taktez nebere. Vyzkousej si to
Datum vložení: 14.9.2003 19:52:52
No alespon nektere vlastnosti a:hover span bere, takze to bude nejaka chybicka CSS v konkretnim pripade / prohlizeci. Leo
Datum vložení: 14.9.2003 20:12:32
Ale bere. Viz topbanner.cz ci dev.anum.biz/renovak
Datum vložení: 14.9.2003 23:04:38
Mate pravdu, v uvedenych odkazech to IE skutecne bere. Trosku jsem to rozpitval a zjistil jsem, ze tu funguje jen v pripade, ze ten SPAN ma definovane background-image. Ja jsem si to zkousel na background-color a s tim to proste nefunguje. Tedy v IE, ostatni prohlizece nemaji problem.
Datum vložení: 15.9.2003 10:36:44
Ale jde. Viz <a href='http://dev.anum.biz/jump' target='_blank'>http://dev.anum.biz/jump</a> (tam se meni bg pod transparentnim gifem)
Datum vložení: 14.9.2003 16:48:55
Pokud vypnu styl, vidim jen ten text, nic jineho, je to naprosto v poradku. Nebo ne?
Datum vložení: 13.9.2003 12:12:17
Jeste jedna vec - moje nadseni pro pouziti obrazku na pozadi (CSS background-image) ochladlo trochu v okamziku kdy jsem zjistil, ze pri ukladani stranky na disk (web page, complete) je neuklada nejen IE ale ani Mozilla 1.2.1... Leo
Datum vložení: 15.9.2003 1:15:59
Zkusil jsem Operu 7.11 a ta to umi. Asi jako jedinna....
Datum vložení: 15.9.2003 1:50:18
Bych rekl ze je to jedno, kdyz si ukladam stranky tak kvuli obsahu, ne kvuli buttonkum.
Datum vložení: 15.9.2003 2:43:13
nojo, jenze nektere stranky, ktere nejsou udelane zrovna nejlip (treba uz zminovane topbanner.cz ci dev.anum.biz/renovak) vypadaji ulozene bez obrazku ponekud podivne :-)
Datum vložení: 15.9.2003 10:38:42
V tom pripade doporucuju maznout i css, pak to mas v pohode...
Datum vložení: 15.9.2003 13:24:42
Co je to maznout css? To neznam? Leo
Datum vložení: 15.9.2003 21:10:59
Tak se zeptej nekoho, kdo umi pracovat na PC, jak se mazou soubory.
Datum vložení: 15.9.2003 13:23:36
Ty ses dobrej, jenze ukladani neni tisk, pri ulozeni asi vetsina lidi chce mit stranky kompletni, a bez menu a ostatnich casti, ktery se neulozi pro background-image je to horsi... Leo
Datum vložení: 15.9.2003 21:10:07
To je ale potom problem css designu (nebo spis kompletniho oddeleni kodu a vzhledu), kvuli tomu se k tabulkam vracet nebudu...
Datum vložení: 15.9.2003 21:31:47
Spíš problém toho, jak je implementována funkce "uložit kompletní stránku" v prohlížečích. CSS layout za nic nemůže. Až si to autoři prohlížečů opraví, bude po problému.
Datum vložení: 15.9.2003 22:01:38
Problem je v tom, ze uzivatele, na rozdil od tvurcu CSS, nezajima jak je stranka delana, ale jak se s ni pracuje... Leo
Datum vložení: 15.9.2003 22:26:32
Pokud jim to vadí, ať se obrátí na autory svého prohlížeče, aby chybu opravili. Je to totiž evidentně chyba prohlížeče, ne stránky. Když se stránka neuloží proto, že je na disku vadný blok, také to nebudu klást za vinu autorovi stránek.
Datum vložení: 15.9.2003 22:44:51
Vzhledem k tomu ze se jedna jen o obrazky na pozadi (coz je problem prohlizece), nevidim zadnou potiz v tom udelat to css takove aby to nevadilo - kdyz je modrej obrazek, blok bude mit modre pozadi.
Vic udelat opravdu nemuzu, suplovat to co ma nabizet prohlizec opravdu nemohu. Pokud by mi na tom kor zalezelo, muzu na webu maximalne vyrobit archiv kde to vse bude - jenze pokud si ten clovek stahne vic stranek, budou pozadi nesmyslne dublovana.
Datum vložení: 16.9.2003 10:42:26
No a co použít uplně jednoduchou metodu, ty obrazky (dokud nebudou schopnější prohlížeče) nalinkovat i do HTML, třeba úplně nakonec s velikostí 1x1 bodu a ještě je navíc skrýt. Koza se nažere a vlk zůstane celý :-)
Datum vložení: 16.9.2003 14:17:59
Jenze to je k nicemu, prohlizece totiz styl i soubor samotny samy prekopaji pri ukladani, zmeni si cesty atd. Mimochodem mne opera ulozi stranku komplet i se vsim co je ve stylech...
Datum vložení: 16.9.2003 15:14:34
Bohuzel, mas pravdu, IE nema vubec potrebu transformovat cesty v CSS, udela to jen v HTML.... Jedinne reseni, ktere me napada (a funguje, zkousel jsem to) je davat v CSS kompletni URL (napr background: url('<a href='http://mujweb.cz/obr.jpg')' target='_blank'>http://mujweb.cz/obr.jpg')</a>
No ja vim, tohle reseni ma milion "ale", nicmene funkcni by melo byt i offline, dokud si IE drzi ony obrazky v cache.
Nebo proste pouzit operu a nemit zadny problem :-)
Datum vložení: 26.12.2005 2:18:44
Ti co si chcu stiahnut celu stranku, a so vsetkym co k nej patri, nech radsej pouziju offline browsery, resp. programy na stiahnutie viacerych stranok aj suvisiacich na disk a maju to lepsie :o) zvysny si snad tahaju stranku koli informaciam :o) nie koli obrazkom, a ak chcu obrazky, tak si ich stiahnu asi bez tahania stranky :o) A to som mal na starosti na kurze /zaklady PC/ uplnych zaciatocnikov a aj ti to tak robili :o)
Datum vložení: 13.9.2003 17:26:30
Pisete, ze prvy sposob nieje semanticky uplne spravny.
Je teda ten druhy semanticky spravnejsi? Ved link neobsahuje ziadny text!
Nehovoriac o tom, ze prehliadace bez CSS asi takyto odkaz vobec nenajdu.
Datum vložení: 22.9.2003 14:51:42
Jak na to koukám tak obrázkové odkazy asi pužívat nebudu, ani jsem je nikdy nepužíval.
Problém je v tom, že ačkoliv např. na svých osobních stránkách mám textu minimálně, tak chci návštěvníkům umožnit změnu velikosti písma.
Web pak sice po změně vypadá ošklivě, ale něco za něco.
Jsem taky toho názoru, že odkazy by měli být hlavně textové, nebo aby se i těch rolloverů vyskytoval v textové podobě.
Nejlepším řešením by pro mě byl rollover, který má vlastní odkaz textový a pod ním se mění pozadí po najetí kurzorem. Musel bych pak ale zvolit velikost písma v absolutních jednotkách, tudíž by nebylo možné v Exploreru měnit velikost písma, aby při změně velokosti okolního textu zůstalo menu správně zobrazené tak, jak jsem ho navrhl.
Vše by bylo přístupné jak bez CSS, tak i s vypnutým zobrazováním obrázků.
Datum vložení: 7.10.2003 20:37:33
Tak jsem zjistil, ze v Opere 7.03 funguji vsechny tri moznosti, ale v novejsi Opere 7.20 funguje jen ten prostredni, prvni a treti se ani nehne......
Datum vložení: 26.7.2008 10:29:49
Dotaz: je možné mít roll over obrázek, kdy po přejetí náhledu obrázku se zvětší fotka v originální velikosti a po přejetí myší zmizí? Důvodem toho je ochrana proti downloadování těchto obrázků. Děkuji Brenda www.brendakucerova.com mail: modeling@brendakucerova.com