Autor Zpráva
habendorf
Profil
Všechno to začalo zde http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=3&topic=13 371 , nějak mě to chytlo, tak jsem si začal hrát :o), ale tam už bych byl OT, tak si na to založím svůj thread.

Prvně jsem zkusil udělat zprůhlednění obrázku - http://habendorf.plavacek.net/pokusy/clip/index.html .
A pak mě nějak napadlo, že kdyby byl spodní obrázek x-krát větší než horní a zároveň by se s ním šikovně hýbalo, dala by se udělat x-krát zvětšující lupa. Tak tady je, pokud se někomu líbí, klidně ji někde použijte.
http://habendorf.plavacek.net/pokusy/lupa/

Je to nástřel, chování u okrajů je trochu zvláštní, chtělo by to ještě učesat. Oba příklady jdou v IE a Opeře (!!!), na Gecku ne. Asi je tam problém s odchytáváním myši, kdyžtak to někdo klidně dopilujte.
Mistr
Profil
Člověče, Ty jsi kouzelník... :-)
habendorf
Profil
Tady jsem ještě kdyžtak udělal modifikaci, ze které je krásně vidět, jak celá věc funguje: http://habendorf.plavacek.net/pokusy/lupa/princip.html
Zkuste si najet na jakékoliv místo na malém obrázku a uvidíte, že přesně odpovídající místo je pod ním i na velkém obrázku. No a pak už stačí jen se kouknout skrz okénko...
habendorf
Profil
Hm, ještě koukám, že na menších rozlišeních to možná bude trochu zlobit :o( , na 1280x1024 to běhá skvěle.
Chamurappi
Profil
Podobnou lupu jsem již kdesi viděl. Měla kolem zvětšované plochy navíc i černý rámeček a stín pomocí PNG. Také tuším neužívala zmenšování obrázku na straně prohlížeče. Stejně jako zde šlo jen o ukázku možností. Bylo by zajímavé vidět to „běžet v praxi“.

Problém s událostmi v Mozille by měla odstranit následující úprava:
function pouzijLupu(e)

{
x=(e?e:event).clientX;
y=(e?e:event).clientY;
...
}

Další věc, která se nelíbí Mozille, vychází z CSS specifikace. Projeví se pouze při standardním režimu (tj. bez <!doctype> to chodí). Shodneme se na tom, že vypisování jednotek „px“ není intuitivní? :-)

V nízkých rozlišeních zlobí ten nešvar, že clientX a clientY vrací souřadnice vzhledem k levému hornímu rohu zobrazovací plochy prohlížeče. Nijak nezohledňují rolování. Díky tomu jsou tyto dvě vlastnosti většinou nepoužitelné (při životě je uměle udržuje W3C). Zbytečnější jsou snad už jen vlastnosti screenX a screenY, které jsou samozřejmě v DOMu také :-)
Co naopak v DOMu chybí, jsou vlastnosti udávající souřadnice vzhledem k elementu, který událost vyvolal. Pro absolutně či relativně pozicovaný element fungují v Exploreru a Opeře vlastnosti offsetX a offsetY. V Mozille layerX a layerY. Možná by problémy lupy řešily, vyžadovalo by to však více úprav.
PerToon
Profil
Üžasný, doknalý! Jen tak dál.
Mám to na 1024x768 a běhá to jak po másle.
Fred
Profil
http://webdeveloper.earthweb.com/repository/javascripts/2005/03/660841 /vergrootglas.html
Leo
Profil
http://habendorf.plavacek.net/pokusy/lupa/princip.html

A co by to melo delat? Ve FF vidim jen dva obrazky, maly a velky, polozene na sobe levym hornim rohem, JS zapnuty a nic... Leo
blast3r
Profil
Leo
Vo FF to nefunguje,
IE a OPERA only
Leo
Profil
Aha, az ted jsem cetl celou diskuzi, ok, Leo
habendorf
Profil
Chamurappi: Bezva, díky, už to běhá i na Gecku (tedy kromě těch menších rozlišení, to jsem neřešil). Překvapivě je Gecko zdaleka nejpomalejší, při rychlejších pohybech myší nestíhá a cuká. IE i Opera jdou hladce.

Fred: Hm, chování i princip je v podstatě stejný. Když mrkneš na zdrojáky, je to něco jiného. A z mých zdrojáků je vidět ta geneze, jak jsem k tomu došel z něčeho úplně jiného, viz první příspěvek. Mě taky nešlo o to bít se tady v prsa, jen jsem si hrál a tohle mi z toho vylezlo, tak jsem se chtěl podělit o radost a nabídnout to zde komukoliv k volnému použití.

Leo: Už to jede i na Gecku, všechny tři příklady jsou aktualizovány - dík patří Chamurappimu.
Oswald
Profil
Získat skutečné souřadnice myši je opravdu Mission Impossible...

habendorf: moc pěkný.
Fred
Profil
habendorf Tak jsem to nemyslel, v životě by mě nenapadlo, že by si něco někde kopíroval, jestli to tak vyznělo tak se moc omlouvám.
ah01
Profil
Podobná věc mě taky už napadla, tak se musím pochlubit ;-)

Průhledná maska v DHTML

Poznámka: Dělal jsem to pro FF, případně pro IE (tam ale nejdou poloprůhledný png), v Opeře to není 100%.
PerToon
Profil
ah01 - Tak to už je dost hustý! :) BTW, v IE6 kromě poloprůhlednýho funguje zcela.
habendorf
Profil
Oswald: Ten článek mě teda moc nepotěšil... :o)

Fred: Ne Frede, ani já jsem to tak nemyslel. Když čtu svůj předchozí příspěvek, je pravda že tak působí, ale to jsem nechtěl. Jinými slovy - samozřejmě vše OK, omlouvat se rozhodně není třeba :o)


ah01: Pěkné! A i v tvém příkladu je IE podstatně rychlejší než FF. OT: To jsou někdy náhody - obrázek v mém příkladu (v tom s počmáraným obrázkem) se jmenuje "ah01" :o) Jenom ne jako Adam H., ale jako Alt Habendorf :o)
Dero
Profil
Moc hezké, dobře přemýšlíš, habendorfe.
Mistr
Profil
Dero
Moc hezké, dobře přemýšlíš, habendorfe. Ještě by se skoro hodilo doplnit: "Tobě to politicky myslí..." :o))
Anonymní
Profil *
Napsal jsem to minule a napíšu to ještě jednou, vážně bomba.
Mistr
Profil
habendorf
Co se stalo s Tvými stránkami s lupou?
habendorf
Profil
Mistr:

http://www.1-webdesign.cz/pokusy/lupa/index.html
http://www.1-webdesign.cz/pokusy/lupa/princip.html
Mistr
Profil
habendorf
Dík.

Mimochodem, co to je ten Habendorf v českém překladu? Stráž nad Nisou? Prve jsem myslel na Hejnice, ale ty jsou, myslím, trošku jinak, ne? Haindorf či tak něco...

P. S.: Jak je Lázně Libverda?
habendorf
Profil
Mistr:

Ano, Alt Habendorf = Stráž nad Nisou. Ten můj nick by byl správně "Habendorfer", ale je to už trochu moc krkolomné.
Hejnice = Haindorf, Lázně Libverda = Bad Liebwerda.

Kdyžtak mrkni na můj úplně první web http://web.telecom.cz/kudela/ (nehodnotit! :o))
peta
Profil *
habendorf
ten princip je pekny, ale jak uz jsem psal minule, zcela nepochybne chybny :)
Tam jasne videt, ze beres okraje pro lupu ala okraj obrazku, kdezto spravne by mel okraj vetsiho obrazku presahovat o polovinu sirky vysky lupy.

Jinymi slovy, kdyz najedu myskou na roh obrazku, musi byt ten roh obrazku uprostred lupy.

Navic se ti tam objevuje scroller ve Firefox.
PerToon
Profil
Navic se ti tam objevuje scroller ve Firefox.
Nejenom ve Firefoxu.
habendorf
Profil
Aktualizace linků:

Lupa: http://pokusy.1-webdesign.cz/lupa/

Princip: http://pokusy.1-webdesign.cz/lupa/princip.html

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: