+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Podział obrazka na piksele (skrypt) - problem (/thread-podzial-obrazka-na-piksele-skrypt-problem)
Strony:
1
2
Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 20-10-2009
Jako że to mój pierwszy post na tym forum proszę o wyrozumiałość
Pisałem już o moim problemie na innym forum niestety nikt nie potrafił mi pomóc, mam nadzieje że tutaj się powiedzie
Chciałbym się dowiedzieć w jakim języku można napisać taki skrypt który podzieli obraz (np. 500x500px) na części; najlepiej kostki 5x5pikseli.
Taki obrazek chciałbym wyświetlić na stronie i usuwać po jednej takiej części (w tym wypadku kosteczce) za każdym razem kiedy kliknie się na odnośnik to tego przeznaczony.
Zależy mi na tym żeby zamiast tej kostki po kliknięciu w odnośnik pojawił się obrazek przezroczysty ew. żeby w ogóle nie było obrazka(puste pole).
Dodam że ten odnośnik ma być jeden dla wszystkich kostek; kostki mogą być usuwane losowo.
Nie wiem czy napisałem zrozumiale (prościej chyba nie potrafię ) ale jak jakieś wątpliwości to pisać. A i nie proszę was o gotowy skrypt, proszę tylko o radę. Bo domyślam się że nikt za darmo nie zrobi takiego czegoś
a poza tym jak ja sam się nie nauczę to nic z tego nie będzie.Naprawdę nie potrafię czegoś takiego znaleść a wydaje mi się że wyczerpałem już wszystkie możliwe frazy więc proszę nie piszcie że "wujek google powie"
Mile widziane jakieś sugestie jak to napisać
.
RE: Podział obrazka na piksele (skrypt) - problem - Labsta.com - 20-10-2009
Najlepiej połaczyć html i js dodatkowo ajax i php jeśli chcesz zapisywac te dane. Rozumiem że ma to być gra, a nie onemiliondolar.
Może przydać Ci się jQuery, z html to <map>, <area>
http://blog.freelancer-id.com/index.php/2009/06/03/jquery-image-map - to jest coś innego, ale podobna filozofia.
http://plugins.jquery.com/project/maphilight > Try out a demonstration -przykład z mapą USA
http://www.tanabi.com/projects/imagemap
http://davidlynch.org/js/maphilight/docs/
Masz kilka wyjśc, albo podzielić obrazek na strefy, odczytać strefę i zrobić akcję, albo np. odczytać koordynaty x,y wskaźnika i odwołać się do odp. obrazka.
Chyba, że masz na myśli 100x100 obrazków po 5x5px wtedy będzie łatwiej. Wygenerować go możesz ręcznie, ale lepiej przez js lub php. Każdemu nadajesz id. Po kliknieciu w dany obrazek, w js gasisz go np. nadadjąc mu klasę "off". W jQuery będzie to raptem kilka linijek.
RE: Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 20-10-2009
Nie do końca to ma być gra, chodzi mi raczej o to żeby zrobić taki skrypt który będzie odsłaniał obrazek. I właśnie wymyśliłem sobie to tak żeby zrobić 2 obrazki jeden pod drugim i usuwać stopniowo ten na wierzchu odsłaniając ten pod spodem. Ten na wierzchu może być jednolity a pod spodem to jakaś grafika. Mam nadzieje że dobrą drogą idę...
Czyli mogę to zrobić tak, że dam obrazki 5x5px wyświetlę je wszystkie na stronie (w kwadracie 500x500px) i każdemu dam ID po czym w js go zgaszę przez dodanie klasy off...
Wszystko ok, tylko chciałbym żeby był jeden odnośnik który usuwa je losowo.
RE: Podział obrazka na piksele (skrypt) - problem - Labsta.com - 20-10-2009
Html i CSS
Małe obrazki umiesciłbym w tabelce 100x100 pól (niby to nie poprawne ale będzie prościej)
Na obrazek właściwy nakładasz te kwadraty na dodatkowej warstwie będzie potrzebne position: absolute i z-index z CSS
JS
Tworzysz tablicę z elemnetami, będzie potrzebna, gdyż z niej będziesz usuwac elementy, żeby wiedzieć jakie jeszcze zostały aktywne
Po kliknięciu w przycisk losujesz kwadrat który odsłonisz, czyli jakiś random
I teraz masz do wyboru albo usuwasz wybrany randomem (po id) obrazek (kwadrat) z kodu, albo mu nadajsz jakąś klasę, która sprawi, że stanie się przezroczysty i usuwasz go z tablicy
Proponuję używać jQuery będzie łatwiej niż w czystym js.
Na forum jest kilka osób, które Ci pomogą jak już ruszysz i coś będziesz miał.
RE: Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 21-10-2009
Z html/css poradzę sobie bez problemu, natomiast gorzej będzie z tym JS :/
Spróbuję coś zdziałać najwyżej jeszcze napisze (raczej na pewno jeszcze napiszę
)Na razie zrobię te tabelki html/css
PS. Nie wiedziałem że można oceniać swoje tematy O.o
RE: Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 22-10-2009
RE: Podział obrazka na piksele (skrypt) - problem - Labsta.com - 22-10-2009
Wd. tego co pisałem każda komórka musiałby mieć id czyli 10tyś!!
Wystarczy wypełnić tablice liczbami z nr. id
RE: Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 22-10-2009
A co dopiero gdyby było 1x1px O.o
Masz na myśli div/span id w css? Możesz podać jakiś przykład np. na pierwszym obrazku ?
Kod:
<td style="width: 5px; height: 5px;"><img style="width: 5px; height: 5px;" alt="" src="black_5x5.JPG"></td>Edit: Coś takiego ?
Kod:
<td style="width: 5px; height: 5px;"><img style="width: 5px; height: 5px;" alt="" src="black_5x5.JPG" id="0001"></td>a w js jak takie id odczytać ?
RE: Podział obrazka na piksele (skrypt) - problem - Labsta.com - 22-10-2009
Nie do końca znam przeznaczenie tego co robisz, ale dałbym np. t1 itd:
Kod:
<td id="t1" style="width: 5px; height: 5px;"><img style="width: 5px; height: 5px;" alt="" src="black_5x5.JPG"></td>No i generowałby to w php.
RE: Podział obrazka na piksele (skrypt) - problem - BeniaminQ - 23-10-2009
I teraz doszłem właśnie do wniosku że nie podałem kluczowej informacji, mianowicie nie napisałem o tym że chce aby każdy przeglądający mógł odsłonić jedną kosteczkę np. jeśli ja odsłonie jedną część (5x5) to żeby wszyscy przeglądający tą stronę widzieli że została odsłonięta jedna sfera, po czym ktoś inny odsłoni następną i tak po kolei aż się pokaże cały ten dolny obrazek... Nie tak że ja odsłaniam sobie sam obrazek a inni odsłaniają sobie swój obrazek.. Bo to się mija z celem.
Wiem, teraz to zmienia postać rzeczy... Pewno poprzednie rady były dostosowane do wyświetlania i funkcjonowania skryptu dla jednego użytkownika. Moje domysły prowadzą do tego że takie coś można wykonać za pomocą php+MySQL...
W sensie żeby wysyłać dzięki php prośbę do odpowiedniej tabeli z mysql o wyłączenie/nie wyświetlanie obrazka za każdym razem kiedy kliknie się w link ?
Kurde mam za małą wiedzę żeby sobie to wyobrazić
A jeśli bym chciał usuwać nie koniecznie z jednego linku ? To wtedy jak zrobić żeby naciskając na odpowiedni obrazek on się zamienił na puste pole ?