ipsace i tiskace
29.07.2006
Interaktivní vtip
Johnny má hezkou fotku, na které je kromě šesti hezkých těl i šest hezkých obličejů. Zaúkoloval mě, abych vymyslel takovou věc. Když se najede na hezký obličej myší, objeví se dole pod obrázkem popisek. A ten popisek by se měnil podle toho, nad čím obličejem se kursor myši nachází.
Čím hezčí obličej, tím vtipnější popisek, přičemž jeden obličej (ten vlevo) je výrazně nejhezčí a bude mít tudíž popisek nejvtipnější. Myslel jsem pochopitelně, že po mně chce vymyslet text toho popisku pro obličej vlevo, a proto jsem slíbil, že teda jako beze všeho
Jenže z milého Johnnyho vylezlo, že po mě nechce kreativitu, ale nádeničinu :-). Užuž jsem ho chtěl fakovat a sbalit si karimatku, ale on začal blekotat cosi o tabulkách a rozřezávání, oddělování hlav od těl(!) a javascriptových bublinách.
Probudil se ve mně záchranářský pud, protože Johny mi připadá jako panensky čistý, podobnými prasárnami dosud nezkažený jinoch. Tabulky! Fuj....
Ve skutečnosti se to dělá takhle, s využitím principu Jezevčík. V něm se využívá méně známé skutečnosti, že absolutně posicovaný prvek se vůbec neohlíží na rozměry svého rodiče, může ležet úplně mimo něj.
Pro výukové účely jsem použil obrázek dvou slečen a rozhovor, odposlechnutý (kde jinde?) v šalině. Obrázek tvoří pozadí obalového divu, němž se vše odehrává a rozměry tohoto divu jsou přesně stejné s rozměry obrázku. Tento obalový div musí mít deklarováno position: relative! To je včetně rozměrů provedeno jako inline-styl.
Nad každým obličejem se potom vytvoří průhledný absolutně posicovaný div. Jejich polohu a rozměry určíme tak, aby byl přesně tak akorát. V mém případě jsou dva, Pro názornost jsou opatřeny rámečkem a označeny jako LK a PK. A oba obsahuji další vnořený div, ve kterém je umístěn text. A tyto vnořené divy jsou absolutně naposicovány dolů mimo své rodiče. To je právě výhoda absolutního posicování, ty popisky bychom mohli umístit kamkoliv, klidně i místo titulku celého blogu. Posice i rozměry jsou opět dělány inline-stylem a jsou texty jsou zneviditelněny.
Bohužel inline-stylem se nedá realisovat presudotřída :hover, jediná, kterou jakž takž zvládá JESPR. Proto se musím uchýlit k zápisu ostatních stylů do sekce <style>, která sice musí být v hlavičce stránky (nechápu proč), ale funguje to i tady, v těle. Hover zajišťuje, aby se vnořený text zobrazil pouze, pokud je nad rodičovským divem kursor. Vypadá to takhle:
Najeli jse si myší? Ha ha ha!
Výhodou tohoto řešení je to, že i pokud má někdo styly úplně vypnuté, zobrazí se mu celý dialog v přirozené posloupnosti. Pro názornost sem dám zjednodušenou ukázku sekce se styly:
<style type="text/css">
#levakoza, #pravakoza {position:absolute; border:1px solid;}
#levakoza div, #pravakoza div {visibility:hidden; position:absolute; font-size:200%;}
#levakoza:hover div, #pravakoza:hover div {visibility:visible;}
</style>
Ve skutečnosti jsem tam přidal i efekt se zabarvováním obličejů, aby vás to inspirovalo. Kdo chce vidět, jak je to uděláno, stačí, když si příslušný kus spotu označí a v kontextovém menu dá Zobrazit zdrojový kód výběru, nebo dá Ctrl+U a uvidí to komplet.
Kdo nemá mozillu nebo Operu, ten tyhle funkce asi nemá, ale kdo se chce zabývat jakoukoli tvorbou stránek i jen okrajově, s Exploderem si rozhodně nevystačí, viď Johnny?
Průšvih
Jelikož žiju v domnění, že IE hover vzládá, ani mě nenapadlo to zkoušet. Bohužel mi to tady teď nefunguje. Ale možná je to tím, že mám zakázané úplně všecky funkce IE. Nebo je to tím, že stylová sekce není v hlavičce?
Jestli to nefunguje ani vám, tak byl celej spot na nic a já se mohl už půl dne oddávat tekknu.
Ach jo, než mě zabije Johhny, radši jdu spáchát rezatou sebevraždu. Enjoy!
Komentáře (23)
Varování:
Budu zde nechávat jen komentáře, které se mi líbí. Demokracie je sen. Nechte si o ní zdát :-)U sebe to nevyzkouším, ale mohlo by pomoct, když bude levakoza a pravakoza . Možná IE nebude potřebovat kvůli hover ani href, ale billví, jak to v něm funguje.
1) Seš rychlej ;-)
2) vůbec tomu nerozumím, ale budu se snažit a určitě ze mě něco vyleze.
3) já a IE: víš dobře, že to nepoužívám. Bohužel však ještě ne zcela zanedbatelná menšina uživatelek (cca 35%) ano
4) koukám, že budu potřebovat základy webdyzajnu. Můžu tebe brát hodiny prosím? ;-))
.
.
.
.
.
.
.
64) Johnny se píše přesně
Jestli IE zvládá hover na , tak je to v pořádku. Cílem bylo na fotku najet myší, čímž se zobrazí povídání o jednotlivých xichtech. Když si to někdo bude chtít přečíst a bude u toho muset pohnout myší (například kvůli scrollingu), prostě na xichrt klikne a dole pod obrázkem se zobrazí příslušný text.
Tedy: na pozadí bude fotka (celá). Na ní budou plavat fotky xichtů (klikací odkazy s hoverem) a pod fotkou bude prázdné místo, kde se při hoverování bude zobrazovat text (proměnlivý podle toho, na kterej xicht se míří) nebo stabilní, pokud se na něj klikne.
ne?
Jestli IE zvládá hover na "a href", tak je to v pořádku.
Zapomínám, že máš povolený html značky...
neni to tak ze kdo pouziva JESPR ma skoro tutove zaplej JS?
vede me k tomu zkusenost ze kdykoli jsem na cizim poci vsude mi neco vyskakuje poskakuje a tak:)
tak by paxtacilo nejak vymyslet zapis JS jen pro JESPR - jestli to teda jde.... neco ve smyslu zapisu CSS margin:blabla; _margin:blablaproIE; aby se to netlouklo.
no a kdyby to nejak slo tak je to jen opruz navic ale varuju ze je fakt jeste prakticky noc a ja v tyhle dobe vymyslim vetsinou utopisticky scenare:(
jinak jsem te Roji chtel upozornit ze zasadne menis pouzitelnost blogu neb jsi vzdycky psal neco po pulnoci takze stacilo kolem druhy mrknout a bylo. no a ted si klidne pises v poledne, a mezi nama - ne abys to nekomu rikal nebo ze ja to nekomu reknu - , NENI TO ZA POSLEDNI DOBU POPRVE!!! :-))))
Včera jsem to řešila :o))
Moje řešení je založeno na javascriptu a dynamickém měnění vlastnosti visible u kaskádových stylů podle idčka (tudíž getElementById atd)...
Dál viz. johnny, a nebo otravujte mě, já to taky přežiju:)
Jinak, nevím, jestli to znáš, ale některé věci co Opera a SeaMonkey/FireFox/Mozilla umí, můžeš do Internet Exploderu protlačit pomocí (neukamenuj mě za to) JavaScriptové knihovny vtipně nazvané IE7. Lze najít na adrese http://dean.edwards.name/IE7 . Zkoušel jsem ji a byl jsem naprosto v šoku. IE najednou uměl vyskakovací menu udělané výhradně pomocí CSS a dokonce to opravdu zvládlo i "position: static"
[17] Na tom vsem je nejtragikomictejsi, ne vyvojeri IE zmakli renderovani pomoci sloziteho javascriptu, ale nezmakli pomoci primitivniho CSS :-/
Jinak teda furt premejslim, jesi zkusit jit spat, koukat na F1 nebo vyvolat fotky z czechteku :-)
Jo, jinak, z těch možností, koukni se na F1 :) I když to bude dost možná zase pěkná nuda :o)
http://www.flickr.com/photos/roj_czech/sets/72157594217382965/
...ja jen kdyby sel nekdo okolo a hledal hotove reseni. chapu, ze Roj je typicky Ferda Mravenec -- prace vseho druhu a bude do toho stourat, dokud to nevymysli sam a LEPSI (-:
Přidání komentáře...
Aktivní styl
Odkazy
