Podział obrazka na piksele (skrypt) - problem

[BeniaminQ]

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ć .

[Labsta.com]

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.

[BeniaminQ]

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.

[Labsta.com]

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ł.

[BeniaminQ]

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

[BeniaminQ]

[Labsta.com]

Wd. tego co pisałem każda komórka musiałby mieć id czyli 10tyś!!
Wystarczy wypełnić tablice liczbami z nr. id

[BeniaminQ]

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ć ?

[Labsta.com]

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.

[BeniaminQ]

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 ?