v.26
v.19 
v12
v.5
v.9| v.26 |
v.19 |
v12 |
v.5 |
v.9 |
| 100% | 100% | 100% | 100% | NO |
Posso vedere il risultato a questo link
Posso scaricare i files a questo link
Questo breve toutorial serve per creare un gioco dove bisogna indovinare l'immagine nascosta; l'immagine è coperta da una serie di quadrati che scompaiono quando vi passo sopra il mouse
mostrando una piccola parte dell'immagine.
il procedimento è molto semplice: creiamo una serie di box che hanno la proprietà di sparire quando ci passo sopra con il mouse. Questi quadrati saranno sopra il div che contiene l'immagine
Nel Css dei box scriviamo:
L'immagine che contiene invece i quadrati la posizione, invece, nel <HEAD> della pagina
come si vede nel css del quadro l'immagine di sfondo è un valore dato dalla variabile; nell' <HEAD> infatti scriviamo uno script che genera un numero casuale tra 1 e 5 ( nel mio caso perchè ho le immagini di fondo che vanno da 1 a 5, se avessi più immagini posso aumentare il numero).
IL codice completo da mettere nell' <HEAD> è :
Per creare i box non devo fare altro che creare un ciclo ( una ripetizione di 256 nel mio caso) che crea il div #quadrato all'interno del dic #contenitore.
Il numero di ripetizioni vari in base alle dimensioni dell'immagine di fondo e dei div #quadrato
Per finire non facico altro che creare un metodo per verificare l'immagine.
Io ho usato il reindirizzamento ad un'altra pagina dei dati che ho: il numero della foto di fondo ( che memorizzo come variabile di sessione) e l'immagine che "clicco" che invece invio alla pagina
session("numero")=numero e