Pokročilý hover efekt

3.6.2007 15:04 | linux

Hover efekt je označení pro vizuální změnu prvku, při přejetí kurzoru myši nad tento prvek. Nejznámější a nejrozšířenější je hover efekt u odkazů.

Historie hover efektu je celkem bohatá a určitě si mnohé postupy dobře pamatujete.

Já si pamatuji tyto:

• Změna obrázku pomocí javascriptu, která pak byla vylepšena přednačítáním hover obrázku.
• Změna obrázku na pozadí pomocí JS.
• Změna obrázku na pozadí pomocí CSS.
• Posunutí obrázku na pozadí pomocí CSS.

Tento článek je věnován těm, kteří neznají poslední jmenovaný postup, tedy vytvoření hover efektu pomocí posunutí obrázku na pozadí.

pokračování článku        

Komentáře

[Zdeněk Burda]

Abclinuxu nemá sloužit jako rozcestník!

[Dundee5]

viz Komprimované XML

[outsider]

Tak modleme se, ať v tom vašem blogu (v tom druhém, s nějakým obsahem) není další padesát článků, kterými nám to tu vytapetujete...

A volejme Díky za tlačítko blokovat, a za to, že funguje i na blogy

[Dundee5]

Článků je tam sice dost, ale tapetování nemám rad :D

[David Jaša]

Buď to sem dej celé nebo to sem nedávej vůbec. Prosím.

[Leoš Literák]

Je to jeho blog, takze to je na nem. Ale kdyby to delal soustavne, asi by si moc sympatii neziskal ..

[Leoš Literák]

Ja to ctu od konce a vidim, ze prave takoveto clanky pise prevazne

[Dundee5]

Nechapu?

Napsal jsem na abicko zatim dva clanky... Z toho se da neco vysuzovat?

[freshmouse]

Ono je nejhorší, že ty články stojí za jedno velké hovno.

[Dundee5]

:D

Tvůj názor ti vyvracet nebudu :)

[Zdeněk Burda]

Proto mu asi na jeho web skoro nikdo nechodí a musí si pomáhat takhle blbým způsobem...

[Dundee5]

Nerekl bych ze denni navstevnost 70-150 lidi je zas tak malo.

A nektere clanky jako treba kompletni navod na instalaci Apache 2, PHP 5 a MySQL jsou IMHO jedny z nejlepsich na ceske scene. (a umistuji se i pred podobnymi clanky od RH, apod.)

[Mark Stopka]

Jenže se jedná o návod pro Windows a ten asi těžko někoho na tomto serveru zaujme, nehledě na to, že na tak jednoduchou úlohu jako je instalace AMP (apache, mysql, php) řešení potřebuje málo kdo návod. Není těžké to nainstalovat, horší je to s tím, to vyladit na maximální výkon, k tomu už člověk potřebuje nějaké znalosti.

[Dundee5]

No je pravda, že zdejší čtenáře zrovna tenhle článek asi nezaujme. Předpokládám, že mají všichni dostatečné znalosti, aby uměli zjistit, jestli už není port 80 obsazen, apod.

[Mark Stopka]

Myslím si, že zdejší čtenáři, kteří chtějí rozcházet apache opravdu znají netcat, telnet a nmap. :)

[Zdeněk Burda]

70-150 lidí za den je nic neříkající informace, důležitější je, jestli tam šli cíleně a jestli našli co hledali. Pokud návštěvníky lákáš takhle blbým způsobem, tak přijde koukne, nic ho nezaujme a odejde.

Srovnávat se s RH je zbytečné, akorát si tak člověk ubližuje v očích ostatních...

[Martin Tůma]

Návštěvnost 70-150 lidí denně získáš, i když dáš na webu o kvantový mechanice do nadpisu “Sex s lolitkama”...

[Robert Krátký]

Ono je nejhorší, že ty články stojí za jedno velké hovno.

To snad není nutné, ne?

[freshmouse]

Nutně za to nemusí stát, ale v tomto případě stojí. Můj názor.

[okias]

ježiš. Vy taky zkritizujete všechno, jestli jste si nevšimli, jsou to dva první zápisky v blogu(a uživatel se registroval dnes) a vy hned začnete každýho kamenovat. Neříkám, že je to něco super, ale vzhledem k tomu, že jsou to dva první zapisy, tak to není tak špatný...

0K!AS

[Luboš Doležel (Doli)]

Špatné by to nebylo, kdyby to nebylo za účelem odkazu někam jinam.

Ono je jedno, jak dlouho je někdo registrovaný, ale jsou prostě věci, které se nehodí dělat...

[Mark Stopka]

No tak je pravda, že je to lepší, než kdyby napsal první zápisek stylem. "Já jsem Pepa z horní, dolní a chtěl bych tady začít blogovat, ale ještě nevím o čem." :)

[Dundee5]

V pohodě, už jsem si zvykl přijímat kritiku :)

[okias]

To je dobře. Tady jsou lidi schopný napsat kolem 20 příspěvků na téma, že si napsal y místo i

0K!AS

[Martin Baleja]

Anebo "ý" místo "í" (schopný a schopní)

[Jakub Suchy]

to je v pohode, jsme zvykli na zas* spammery

[nobuo]

Jenom otázka. Je tohle skutečně vhodný způsob na dosažení takových efektů? Není vhodnější javascript či něco podobného? Nejsem web vývojář, ale mám pocit, že při tomhle způsobu musí dojít k opětovnému přepočítání pozice prvků na stránce. Nebo ne?

[Dundee5]

NN, tohle neovlivňuje ostatní prvky. Týká se to jen toho jednoho, kterému posuneš pozadí. Je to dnes nejelegantnější technika na hover efekt.

[nobuo]

Aha, chápu :). Posun pozadí. Příště číst pozorněji. Já jen mrkl a myslel jsem, že se mění pozice celého prvku :). Dík.

[Luk]

Podle mého subjektivního pozorování (nepodloženého měřením) jsou prakticky jakékoli operace realizované pomocí CSS podstatně rychlejší než totéž pomocí Javascriptu.

[pozortucnak]

Toto už dávno publikoval Pixy na svých stránkách www.pixy.cz

[Dundee5]

To je dost možné.

Myslím, že téměř všechno už někdo někde publikoval :)