Starší komentáře ke článku: Rolečky pomocí CSS se vším všudy
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 3.4.2004 1:10:13
Pokud jde skutecne o odkaz (napriklad menu), tak CSS reseni je elegantni. Pokud jde jenom o ozdobu, kdy je tam "odkaz" nikam jenom kvuli tomu, aby sel pouzit hover, je cistsi reseni JavaScript (osobne kdyz vidim <a href="#" dostavam tresavku). V tom pripade bych u tech, co ho maji vypnuty, tuhle ciste zdobnost obetoval ve prospech korektniho html kodu. semantickemu. Patricny JS nemusi byt o nic delsi nez Vas CSS kod. Leo
Datum vložení: 3.4.2004 3:29:09
patřičný JS by byl rozhodně kratší než tento CSS kód, s "hacky" ;)
Datum vložení: 5.4.2004 10:53:29
Tohle lze udělat jednoduše také třeba v Image Ready, ale to není zcela tapeta programatorů. Osobně preferuji odkazy menu vytvářet pomoci CSS před JS. Je to, myslím, věc návyku a zkušenosti pro co se rozhodnout.
K tomu fungování v - IE i Mozilla fungují příklady uvedené autorem bez problemů.
Datum vložení: 6.4.2004 22:00:07
U menu samozrejme taky davam prednost CSS. Jenze <a href="#" urcite neni menu, jen okrasa - a na tu je lepsi JavaScript, kdyz uz IE neumi hover na nicem jinem nez na odkazu... Leo
Datum vložení: 7.4.2004 13:24:37
JavaScript všechno neřeší. Zkuste si například kontrolovat focus na tlačítkách, která nejsou vytvořena přes <a href="#"...
Datum vložení: 9.4.2004 19:38:43
Proc bych to mel delat? Jestli myslite udalost (on)focus, tak k te dochazi jenom na elementech, kde je to definovane. Leo
Datum vložení: 3.4.2004 11:12:47
Proč se mi místo diskuzních příspěvků zobrazuje jejich XML zdroják ? (W98SE+IE6SP1)
Datum vložení: 4.4.2004 7:15:24
Hm, tak nepoužívejte ie6.
Datum vložení: 6.4.2004 13:31:29
Hm a nepouzivejte ani Wokna. Linux + Mozilla :-)
Datum vložení: 6.4.2004 18:27:18
A nepouzivejte ani pocitac, je to zdravejsi :-) Leo
Datum vložení: 9.4.2004 8:31:16
A pro jistotu zase vylezeme na stromy :)
Datum vložení: 3.4.2004 16:03:01
<I>Celý kód na vytvoření rolečku fungujícího ve všech moderních prohlížečích tedy vypadá takto:</I>
Tak tohle je fakt ftipný :) Když si uvědomíte, že je potřeba několika hacků a že msie 5+ je už několik let starý :) V moderních prohlížečích by stačila tak třetina kódu.
Datum vložení: 7.4.2004 15:54:34
v modernich prohlizecich, staci nadefinovat v css vlastnost :hover a uz je vsechno, ale problem je ze vetsina uzivatelu NEMA moderni prohlizec, ale MSIE
Datum vložení: 3.4.2004 17:48:07
No tohle celé se nedávno nově řešilo na A list apart a i tam uvedli , že originál myšlenky pochází od Pixyho : <a href='http://www.alistapart.com/articles/sprites/' target='_blank'>http://www.alistapart.com/articles/sprites/</a>
Datum vložení: 4.4.2004 20:02:05
Pixy je jiste mistrem ve svém oboru, a jsem rád, pokud se o nějakém českém kodérovi mluví ve světě.
... ale zrovna preloading pomocí CSS není Pixyho původní nápad, hrál už jsem si sním par mnoha (!) lety, a to díky článku <a href='http://www.webreference.com/dhtml/column2/' target='_blank'>http://www.webreference.com/dhtml/column2/</a>, který vyšel v roce 1998 :-)
Datum vložení: 3.4.2004 20:59:40
ani jeden příklad. WinXP Home + IE6 Sp1, Eurotel DN...
Datum vložení: 5.4.2004 9:31:34
Ve Win XP Profesionál (cestou IE 6) bez problémů. Ještě se na to mrknu v dalších prohlížečích....
Datum vložení: 5.4.2004 9:42:52
<B>Ad: Nefunguje</B>
Tak rovněž ve Win XP Preofesional Mozilla zobaruje bez problému!!!
<B>Ad: Zobraz</B>
No, myslím že Mozilla kromě jiného zobrazuje opacity průhlednosti prvků jinak než IE, takže rozdíly určitě jsou.
Datum vložení: 5.4.2004 17:19:08
Pod WinXP home a IE6 furt nefunguje, ale při kazdém přejezdu myšky se snaží sosnout obrázek. Pod Mozillou funguje, tak za to asi Eurotel nemůže...
Datum vložení: 4.4.2004 0:54:29
Uhm. Pixy to fakt vyriesil uz davno a <B>velmi</B> elegantne:
<a href='http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/' target='_blank'>http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a>
Datum vložení: 4.4.2004 20:21:38
no pěkný... ale stejně jako všude jinde, i tady mi při přeblikání odkazů problikává bílé pozadí a viditelně to hustě vyhuluje kompa. a když jsem několikrát přejel hodně rychle, bílé pozadí dokonce zůstalo. tohle kdyby pixy vyřešil, byl bych mu vděčen. ale on asi stránky v MSIE6 zas tak moc netestuje.
Datum vložení: 5.4.2004 9:22:16
Shodou okolností jsem řešil stejný problém s přeblikáváním backgroundu u odkazu viz. Pixy. Napadlo mě pouze jedno řešení - poslání hlavičky s cacheováním, které přebije nastavení v IE.
Datum vložení: 5.4.2004 9:30:15
Inu, pokud se týká IE, zjistil jsem, že pokud v nastevení Internet Exploreru nastavíte Zjišťování nových stránek na Automaticky (ne při každé návštěvě stránky), problém s problikáváním zmizí a IE poslušně čte background image na hoveru z cache. Doporučuji vyzkoušet.
Datum vložení: 5.4.2004 10:29:32
Ano, to je pravda, já jsem měl právě na mysli tu aktualizaci při každé návštěvě stránky. Otázka je, co mají uživatelé nastaveno. Většinově snad to "Automaticky".
Datum vložení: 5.4.2004 10:37:32
Výchozí nastavení je Automaticky. Takze ho má určitě drtivá většina. Leo
Datum vložení: 5.4.2004 23:58:34
No neviem... Spustil som MSIE6 a na jeho priklade som behal mysou ako sialeny, ale fungovalo to uplne v pohode. Neveim ako mam nastavene kesovanie, ale malo by byt standardne, lebo som ho urcite nemenil (max. tak velkost kese). A pre istotu som to sialene behanie mysou nad tym skusil aj v IE 5.5 a IE 5.01 ..... vsade vporiadku....
Datum vložení: 10.4.2004 4:11:52
Problikavani je zpusobeno nacitanim obrazku, ie je totiz k*k*t... Resit se to da treba pouzitim 2 divu na sobe, kdy kdyz zmizi ten horni, tak pod nim je rovnou ten druhy... I Pixyho reseni s background-position problikava :(
Datum vložení: 7.4.2004 19:11:46
Já jsem na tuhle věc přišel už docela dávno, to se o tom ještě moc nepsalo. Ale nějak jsem na to zapomněl, proto to vyšlo až teď...
Datum vložení: 5.4.2004 12:00:36
Dobrý den,
první rollower nefunguje (přesně podle předpodladu autora).
druhý funguje špatně (odsouvaný image (button1) se zobrazuje od začátku řádky - tudíž není překryt). ... Nepomohlo by margin namísto padding?
S úctou,
KiN
Datum vložení: 5.4.2004 17:27:06
Pokud vim, objektu s atributem id="xxx" by na strance nemelo byt mnoho (doporucuje se nanejvis 1)
Datum vložení: 5.4.2004 17:42:57
Mohu se optat cim je podlozeno toto tvrzeni pripadne na duvod? Tedy pokud mate na mysli se stejnym ID pak ma byt maximalne jeden, v tom mluvi norma vic nez jasne - ale pokud mate na mysli celkove pro dokument tak si nedovedu predstavit realny duvod.
Datum vložení: 5.4.2004 17:27:07
Pokud vim, objektu s atributem id="xxx" by na strance nemelo byt mnoho (doporucuje se nanejvis 1)
Datum vložení: 6.4.2004 1:19:16
Pixyho řešení, které pouze posouvá pozadím, nemá chybu : viz. na <a href='http://pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html' target='_blank'>http://pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html</a>
Datum vložení: 6.4.2004 21:29:53
Tak jsem to testoval v trochu starších prohlížečích a výsledky byly opravdu zajímavé. Opera 6.05 a NN 4.x s tím ani nehne navíc první příklad se v NN 4.x ani netváří jako odkaz, takže na něj nejde vůbec kliknout :-(. Pak už jsem jen zjistil ještě malou chybku v NN 6, kde se nějakým způsobem zasekl ten světlejší obrázek a oběvil se podtržený odkaz Button, po opětovném najetí na obrázek odkaz zmizel. To vše bylo testováno pod Win XP.
Datum vložení: 7.4.2004 15:21:22
štěstí, že s těmito prohlížeči už dnes nemusíme počítat.... (resp. jejich majitelé ví, že většina webů se zobrazuje špatně)
Datum vložení: 7.4.2004 15:21:55
Relativní pozice obrázku a nulový z-index je určitě vtipné řešení. Ale nestačilo by dát tam jenom visibility:hidden? Myslím takhle:
#button a:hover img {visibility: hidden}
Datum vložení: 7.4.2004 19:07:57
To by při vypnutých obrázcích skrylo i alternativní popisek, proto jsem to v rámci "dokonalosti" nemohl použít ;-)
Datum vložení: 7.4.2004 23:55:38
Inu, vidím, že to máš vymakané. Já jsem si na příkladu všimnul jenom toho, že když mám vypnuté obrázky (to já rád) a najedu nad odkaz a kliknu pravým tlačítkem, tak tam nemám volbu "Zobrazit obrázek". To je jediná věciška miloušká, kterou tomu lze vytknout, jistě. Všimnul jsem si toho hned, ale nechtěl jsem být hnidopich. Když už sám zmiňuješ vypnuté obrázky, tak to uvádím.
Nicméně javascriptová řešení se v případě vypnutých obrázků a pravých tlačítek také chovají dost špatně.
Datum vložení: 10.4.2004 15:10:50
To máš pravdu, to jsem nezkoušel ;-) Je to logické -- ve chvíli, kdy máš myš nad obrázkem, tak se nad něj posune vrstva div#button, takže pro prohlížeč tam v tu chvíli není obrázek...
Datum vložení: 8.6.2004 19:24:04
a co pridat alternativni text do title u odkazu?
Datum vložení: 11.4.2004 14:17:09
Bohužel všechny řešení pomocí CSS jak Pixyho tak i těch co jsou zde mají jednu menší vadu. Při najetí myší nad tlačítko se na malý okamžik objeví "přesýpačky". Na trochu solidním stroji to nejde téměř postřehnout, nicméně na nějaké čtyřstovce pentiu by to mohlo působit dosti rušivým dojmem (řešení javascriptem nic takového nedělá).
Shledávám to jako velký nedostatek :-(
Datum vložení: 12.4.2004 23:53:17
... v IE ...
Datum vložení: 13.4.2004 15:51:07
Ano, omlouvám se. Pouze a jen v MSIE, tedy nejpoužívanějším prohlížeči. A z toho důvodu jsou rolečky pomocí CSS nesmysl. Článek by se měl jmenovat: Rolečky pomocí CSS se vším všudy a v MSIE i s něčím navíc ;-)
Datum vložení: 21.5.2004 22:51:31
Záleží opravdu jen na nastavení cacheování u klienta. Já MSIE používám jen protože hodně (amatérských) webmasterů neoptimalizuje a pokud shledám nedokonalost, kterou mohl způsobit IE, tak se na to mrknu v něčem lepším.
V Mozille a Opeře brouzdám jen po oblíbených a ozkoušených stránkách :-).
Datum vložení: 5.6.2004 14:47:25
Já tedy používám rollovery řešené javascriptem a přesýpačky se mi u nich zobrazují také (IE 6 s kešováním). Pomalostí počítače ani velikostí obrázků to určitě není, takže je to jen můj osobní problém, nebo používám nějaký "nevychytaný" skript?
(Řeším to standardně:)
<I>var swapimg = new Image();
swapimg.src = "url";
function swap () {
document.images[0].src = swapimg.src;
}</I>
Díky za případnou odpověď
Datum vložení: 23.6.2004 16:43:35
Místo odkazů dělaných obrázkem, kde je text a kolem něj nějaký graficky složitý rámeček, radši použuji následující:
Odkaz udělám textový (upravený vhodně pomocí width, paddingu a marginu) a dám mu jako background obrázek s tím rámečkem. A pokud se má měnit, tak na a:hover dám jako background obrázek se změněným rámečkem.
V CSS je to možná delší zápis než v JavaScriptu (ten neovládám, proto nevím), ale v menu už jen stačí přidat nebo ubrat a href=
Datum vložení: 5.7.2004 15:22:35
Jo, super, perfektní finta, to by mě nikdy nenapadlo...
Ale no teda lidi, nic proti ale zkuste si pěkně nahlas říct <B>ROLEČKY</B>.
Upřímně, nechce se vám zvracet?
Mě jo... Možná by bylo mnohem lepší používat původní anglický název, ne?
Peace 4ALL
Datum vložení: 5.7.2004 19:37:01
Ačkoli jsem anglofil, na slovu "rolečky" nevidím nic závadného. Zvracet se mi obvykle chce, když se Češi vyjadřují pomocí šílených pseudoanglických zkratek a termitů...
Datum vložení: 18.7.2004 21:25:51
Možná to bude tím, že jsem z Ostravy...
Ale většina mých známých se potom, co uslyšela tohle slovo, mohla smíchy potrhat... tak nevím, já bych použil původní anglický termín, přec jen, je to asi nejlepší.
Datum vložení: 20.9.2004 12:33:39
je to fakt brunátně ohavnej a směšnej název :-)
Datum vložení: 10.10.2004 0:18:51
Jojo z rolečků je mi taky špatně ale návod je to dobrej :)
Datum vložení: 15.10.2004 21:48:23
V CSS jsem naprosty zacatecnik. V CSS delam jen ty opravdu zakladni veci a vetsinu jen zpusobem "najdu priklad, otevru zdrojak a zkoumam jak se to zachova po zmene tohohle a umazani tohohle". Na strance bych potreboval pouzit tento priklad a to zmenu obrazku po najeti. Bohuzel ale nechci pouzit obrazek pro kazdy odkaz menu a udelal jsem jen menici se obrazek tlacitka bez popisu a ted bych potreboval vzdy na urcene misto napsat text. Povedlo se mi to jen absolutne poziciovat. Coz ale nechci a rad bych to pozicioval relativne. Bohuzel jsem neprisel na zpusob jak na to. Treba se mi i podari tam vlozit text, kde ma byt, pak ale nefunguje zmena obrazku po najeti mysi. Myslim si, ze delam nejakou banalni chybicku, kterou proste vzdy prehlednu. Nevite o nejakem prikladu, ktery jsem popsal? Idealni by byl link na stranku, kde to je takto udelano. Diky, Roman Stris
Datum vložení: 1.11.2004 0:03:00
nekolikrat zminovanej pixy <a href='http://interval.cz/__redirect/redirect.asp?what=interval_discussion&url=http://wellstyled.com/css-nopreload-rollovers.html' target='_blank'>http://wellstyled.com/css-nopreload-rollovers.html</a> nepomuze?
Datum vložení: 7.1.2005 16:15:16
Ve FireFox 1.0 En na Win2000 En je priklad taky funkcni. Ale nevim, zda jit touto cestou nebo cestou JavaScript, bez problemu se daji pouzit obe stejne.
Datum vložení: 16.5.2005 12:16:01
radši bych volil toto "http://wellstyled.com/css-nopreload-rollovers.html"