Autor Zpráva
Pan X
Profil
Dobrý den, již několik dní mě trápí jeden problém a já ho stále nemohu vyřešit. Potřeboval bych vytvořit jakousi "mapu" pomocí JS ve která by se dala posunovat.

Mám obrázek, který je poměrně velký. A já bych potřeboval vytvořit okénko (např. 200px x 200px) ve kterém by se ten obrázek zobrazoval. Vždy by se z toho obrázku (velkého) zobrazil jen oněch 200px x 200px a dalo by se to posunovat NAHORU, DOLU, DOLEVA, DOPRAVA.

Výsledný efekt by měl být jako mapy v on-line hrách (traavian, divookekmmeny, atd..)

Mohl by mi někdo poradit jak toho pomocí JS dosáhnout? Vůbec netuším jak na to. Pokud to pomocí Js udělat nejde mohl by jste mi poradit čím by se to dalo (nechci flash).

P.S Kdysi jsem to někde v JS viděl ale za dva dny googlení sem to nenašel a ani nic co by se dalo použít (nevím co mám přesně hledat)

Předem díky

Pan X
joe
Profil
Možná by na to stačil jen jeden div, kam by se obrázek vložil na pozadí a "hýbalo" by se jen s pozicí toho obrázku.

Nebo další možnost je použít div o rozměrech s relativním pozicováním a uvnitř by byl obrázek absolutní a zase by se jen měnily pozice obrázku.

A co se týká Javascriptu, je třeba si najít skripty pro zjištění kliknutí myši a pro zjištění aktuální pozice kurzoru v tom divu. A pak už je to jen otázka logického myšlení co, kdy a jak kam posouvat :-)
imploder
Profil
Pan X
Mohl by mi někdo poradit jak toho pomocí JS dosáhnout?
Dát obrázek do divu 200x200 a tomu divu nastavit overflow:hidden. Tlačítka na posouvání pak budou měnit pozici obrázku uvnitř divu změnou příslušných atributů v CSS. Nebo může být obrázek na pozadí toho divu, pak nezáleží na nastavení overflow a měnit se bude background-position, jako se to dělá u hoveru v menu.
PecanCZ
Profil
mohli by jste tady vložit přímo script? byl bych vám moc vděčný, už se s tím taky trápím hodně dlouho, děkuji

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:

0