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

Avatar

Autor komentáře: Leo

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

Avatar

Autor komentáře: radek oblog

Datum vložení: 3.4.2004 3:29:09

patřičný JS by byl rozhodně kratší než tento CSS kód, s "hacky" ;)

Avatar

Autor komentáře: Vícha

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ů.

Avatar

Autor komentáře: Leo

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

Avatar

Autor komentáře: Petr Havlík

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="#"...

Avatar

Autor komentáře: Leo

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

Avatar

Autor komentáře: zucca

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)

Avatar

Autor komentáře: Jméno a příjmení

Datum vložení: 4.4.2004 7:15:24

Hm, tak nepoužívejte ie6.

Avatar

Autor komentáře: Nemo

Datum vložení: 6.4.2004 13:31:29

Hm a nepouzivejte ani Wokna. Linux + Mozilla :-)

Avatar

Autor komentáře: Leo

Datum vložení: 6.4.2004 18:27:18

A nepouzivejte ani pocitac, je to zdravejsi :-) Leo

Avatar

Autor komentáře: Dejma

Datum vložení: 9.4.2004 8:31:16

A pro jistotu zase vylezeme na stromy :)

Avatar

Autor komentáře: Lukáš Hroch

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.

Avatar

Autor komentáře: moderni prohlizece

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

Avatar

Autor komentáře: Mirek

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>

Avatar

Autor komentáře: dgx

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 :-)

Avatar

Autor komentáře: Pavel

Datum vložení: 3.4.2004 20:59:40

ani jeden příklad. WinXP Home + IE6 Sp1, Eurotel DN...

Avatar

Autor komentáře: Vicha

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....

Avatar

Autor komentáře: Jméno a příjmení

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.

Avatar

Autor komentáře: Pavel

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...

Avatar

Autor komentáře: Satano

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>

Avatar

Autor komentáře: pierre

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.

Avatar

Autor komentáře: Polka

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.

Avatar

Autor komentáře: Plaváček

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.

Avatar

Autor komentáře: Polka

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".

Avatar

Autor komentáře: Leo

Datum vložení: 5.4.2004 10:37:32

Výchozí nastavení je Automaticky. Takze ho má určitě drtivá většina. Leo

Avatar

Autor komentáře: Satano

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....

Avatar

Autor komentáře: Jan Brasna

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 :(

Avatar

Autor komentáře: Martin Snížek

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ď...

Avatar

Autor komentáře: KiN

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

Avatar

Autor komentáře: ja

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)

Avatar

Autor komentáře: Vita

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.

Avatar

Autor komentáře: ja

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)

Avatar

Autor komentáře: Špika David

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>

Avatar

Autor komentáře: Nik

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.

Avatar

Autor komentáře: dgx

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ě)

Avatar

Autor komentáře: Yuhů

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}

Avatar

Autor komentáře: Martin Snížek

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 ;-)

Avatar

Autor komentáře: Yuhů

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ě.

Avatar

Autor komentáře: Martin Snížek

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...

Avatar

Autor komentáře: J. Vágner

Datum vložení: 8.6.2004 19:24:04

a co pridat alternativni text do title u odkazu?

Avatar

Autor komentáře: MB

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 :-(

Avatar

Autor komentáře: Jan Brasna

Datum vložení: 12.4.2004 23:53:17

... v IE ...

Avatar

Autor komentáře: MB

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 ;-)

Avatar

Autor komentáře: Jaaa

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 :-).

Avatar

Autor komentáře: Skutečně?

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ěď

Avatar

Autor komentáře: Aleš Krejza

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=

Avatar

Autor komentáře: Mr.D

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

Avatar

Autor komentáře: Vilém Málek

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ů...

Avatar

Autor komentáře: Mr.D

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ší.

Avatar

Autor komentáře: Vojtěch Janda

Datum vložení: 20.9.2004 12:33:39

je to fakt brunátně ohavnej a směšnej název :-)

Avatar

Autor komentáře: Jiří Binder

Datum vložení: 10.10.2004 0:18:51

Jojo z rolečků je mi taky špatně ale návod je to dobrej :)

Avatar

Autor komentáře: Roman Striš

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

Avatar

Autor komentáře: spaze

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?

Avatar

Autor komentáře: XMan

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.

Avatar

Autor komentáře: Radek

Datum vložení: 16.5.2005 12:16:01

radši bych volil toto "http://wellstyled.com/css-nopreload-rollovers.html"

Zpět na článek | Úvodní stránka Interval.cz