Zoom webu kolem kurzoru – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím všechny :)

Možná nevim úplně kam s tim. Domnívám se, že tohle potřebuje script na straně uživatele. Resp. v html/css a lehce php nevim jak si něco takového napsat.

Moje představa je asi taková, po kliknutí na ikonku/odkaz na webu se kolem kurzoru ukáže obdélník se zoomem. Stejnym způsobem se to i vypne. Toť vše.

Připojen obrázek.Obrázek z netu pro představu.

Podle toho co o js vím, byl bych radší za klasický javascript, jen tato funkce v nějakém souboru. Nerad bych kvůli jedné funkci načítal nějakou online knihovnu.

Případně, psali by jste to v něčem jiném?

Našel jsem na internetu hodně hotových řešení web zoomu, ale žádné neodpovídalo mé představě. Provedením a jednoduchostí. Ten zoom na obrázku je pomocí desktopová aplikace.

Díky za každou radu.

#1 reffcz
Otázkou je, zda máte obrázek, kterýžto chcete zobrazit zprvu jako preview - načež jej následně v separátním elementu zobrazit, či alespoň HTML element, kterémuž následně zvětšit velikost - jakož i dětem. Jedná-li se o jeden z těchto případů, stačí mít 2 verze - jak již jsem naznačil a jen je pak prohazovat. Pokud nechcete zobrazovat pod myší, nemusí to být ani separát - stačí 2 verze CSS a jen je střídat...

Pokud nejde o obrazek, pak by se mozna dal vyuzit canvas nebo svg grafika, pripadne oboji.
svg v IE:
http://samples.msdn.microsoft.com/…Graphic.html
http://msdn.microsoft.com/…s.85%29.aspx
https://developer.mozilla.org/…oreignObject

ted jsem narazi na http://htmlpreview.github.io/?…

Pro lepší představu, chci to použít na stránce reff.cz

Nechci scrollovat v jednotlivém boxu, chtěl bych opravdu obdélník kolem kurzoru, který ho bude následovat a v tom zoom všeho v určitý oblasti (v závislosti na % zoomu a velikosti obdélníku kolem kurzoru).

Prvky jako odkazy, vstupní pole atd musí v tomto "režimu" se zaplou lupou fungovat.. díky

#5 reffcz
Již jsem to vysvětlil. Povedeš si 2 soubory CSS a kombinovat je budeš za pomoci JS. Stačí naplňovat innerHTML separovaného elementu (od okolí - za pomocí "position: fixed") elementy, kteréžto chceš zvětšit - jen jim za pomoci JS změníš třídy atp.

Promiň, ale myslím, že se nechápem.

Jinak.

Problém č. 1

Je potřeba vytvořit element, třeba 400 x 200px, umístěný kolem kurzoru tak, že kurzor je vždy uprostřed. Element se hejbe spolu s kurzorem.

Problém č. 2

Element musí zobrazovat plochu 200 x 100px kolem kurzoru ve dojnásobném zvětšení. Je jedno nad čim se v tu chvíli kurzor nachází, prostě přibližuje vše kolem kurzoru.

Problém č.3

Všechny takto přiblížené prvky (odkazy, tlačítka atd..) musí fungovat, tzn. stránku je s touto lupou možno normálně používat.

Problém č.4

Tato lupa tam nesmí být pořád, zapne a vypne se po kliknutí na nějakou ikonku.

Ber mě tak, že s js neumim nic. A jestli jde tohle vyřešit jen s html a css, tak asi i tam mám velké mezery.

#7 reffcz
Což jsem přesně popsal - jak vyřešit!!! Problém první - to je ten element, co ho dáš "position: fixed" a top a left budeš v intervalu nastavovat na pozici myši. Problém 2. a 3. -> 2 CSS soubory a jen pomocí JS měnit třídy atp.! Bod 3. - JS funkce... Pořádně si přečti co jsem ti napsal - já na vše odpověděl hned v první reakci!

BTW:

JS funkci zapínající lupu si představuji takto:

"position: fixed" element dostane innerHTML od elementu, který se má zvětšit
změní se v tom ID, třídy a další atributy pro použití stylů "zoom.css" (ilustrační název)
zapne se interval nastavující top a left "position: fixed" elementu


 

Vlastně namísto intervalu bude asi vhodnější ohandlovat hover atp.

Myslim, ze te chapeme. Chces neco takovehoto, ale aby web fungoval.
http://peter-mlich.wz.cz/…y/pplupa.htm
Jeden velky, jeden maly obrazek. Takze mas stranku s jednim css a pak mas jinou strenku ve framu s css, ktery ma velikosti nastavene dvojnasobne. Ten ifreme pres clip orezes a pozicujes na pozici kurzoru. Presne, jak to dela tady s tim obrazkem.
V tom iframe by mozna slo vyuzit browserovy zoom stranky.
https://www.google.cz/search?…