conta click +messaggio

[antonywest]

buon giorno ragazzi avrei bisogno di un aiuto data la mia ignoranza in materia.
mi è venuta un'idea e ho realizzato questo sito HTTP://WWW.TISFIDO.ALTERVISTA.ORG è un'idea carina e l'obiettivo è trovare l'ago
il problema è che non so fare l'ago in pratica vorrei sapere da voi come inserire un bottone da 1*1 pixel (sarebbe l'ago) e ogni volta che qualcuno lo trova,cliccandoci sopra deve aprirsi una finstra con un messaggio da me scritto

se poi c'è il modo di inserire pure un piccolo display che visualizza il numero dei click è ancora meglio,almeno si vede quanta gente ha trovato l'ago
grazie mille

HTTP://WWW.TISFIDO.ALTERVISTA.ORG

[Mich_]

Per l'ago, come primo prototipo puoi usare una mappa (tag <map> contenente un tag <area>).
Se vuoi una cosa un po' piu` sofisticata, devi usare JS (evento onclick sull'immagine).

Comunque ambedue sono tecniche lato client, che quindi vengono rese palesi se l'utente visualizza il codice. Con JS e qualche trucco sw, puoi cercare di nascondere le coordinate, ma comunque sono sempre rintraccaibili. Lo svantaggio di JS e` che crei una cosa non-accessibile (vuol dire che chi non ha JS abilitato non puo` partecipare al gioco).


Per il numero di click: se vuoi i click fatti dal singolo utente, la soluzione e` sempre JS (con lo stesso problema); se invece vuoi il conto dei click fatti da tutti gli utenti, allora devi usare anche un linguaggio lato server (PHP, ASP, ...).


Riassumendo:
1. studia i tag <map> e <area>
2. studia JS (devi avere almeno le basi che da` un corso on-line, tipo quello di HTML.it)

Dato il tipo di domanda, sposto in JS.

[antonywest]

ho capito grazie per la risposta così veloce
purtroppo non ho le basi :master: è stato pure un problema capire come modificare il tema del sito perchè questo è in pratica il primo che faccio.

si cmq l'ago deve essere non rintracciabile spulciando il codice e cmq dovrei poterlo mettere dove voglio io in modo preciso

uff mi sa che non ce la farò

[Mich_]

si cmq l'ago deve essere non rintracciabile spulciando il codice e cmq dovrei poterlo mettere dove voglio io in modo preciso

Avevo intuito che ti mancavano alcune nozioni fondamentali, per questo ti ho invitato a studiarti il "corso".

Comunque non e` che tutti gli utenti abbiano voglia di "barare": in fondo e` un gioco e come tale va preso.

Il mio consiglio e` quindi anzitutto di usare il <map>: questo ti aiuta a fare il primo passo. Per iniziare,
nel tag <area> devi metterci:

<area ... onclick="cliccato(); return false;">

Contemporaneamente nella head della pagina ci dovra` essere la chiamata ad un file JS (copia da altri JS gia` presenti); tale JS dovra` contenere (all'inizio):

function cliccato() {
  alert('trovato!!');
  return;
}

nota che l'argomento dell'attributo onclick e` JS, come pure la funzione chiamata.
A questo punto puoi sviluppare il JS e fargli fare quello che vuoi:
a) il contatore di click (lato client),
b) una finestra di complimenti migliore dell'alert,
c) una valutazione su quanto tempo l'utente ci impiega, ...

Alla fine dovresti essere in grado di eliminare il tag <map> e sostituirlo con un JS applicato all'evento onclick della immagine. E ti ricordo che il JS puo` venir offuscato (e` il passo successivo), per cui non e` immediato capire cosa sta facendo: per il tuo gioco potrebbe essere sufficiente (non ci sono in palio premi in denaro - chi bara inganna solo se stesso).

PS: per le prove, ti consiglio una mappa un po' piu` grande di 1x1, altrimenti perdi il tuo tempo a cercare il punto, anziche` sviluppare il programma.

[antonywest]

ciao ho letto un pò di notizie su questo forum e mi sembra di aver capito che l'immagine del pagliaio sarà la mappa e l'area su cui bisogna cliccare nel mio caso è lo stesso bottone(in realtà si ridurrà ad 1 pixel) al tag areo però invece di associare un link associo l'operazione onclick che mi fa partire la funzione associata per far comparire il messaggio.
è giusto il ragionamento? scusa se non uso termini opportuni ma non sono nel campo.

quello che non ho capito è come deve essere fatta la funzione associata ai click...e poi come trovo le cordinate precise per posizionare il bottone

ho letto su questo sito l'esempio della cartina dell'italia e delle regioni
grazie mille

[Mich_]

Originariamente inviato da antonywest
ciao ho letto un pò di notizie su questo forum e mi sembra di aver capito che l'immagine del pagliaio sarà la mappa e l'area su cui bisogna cliccare nel mio caso è lo stesso bottone(in realtà si ridurrà ad 1 pixel)

Esatto.

al tag areo però invece di associare un link associo l'operazione onclick che mi fa partire la funzione associata per far comparire il messaggio.

Quasi giusto.
Il tag <area> dovra` avere un href (e` obbligatorio), ma non ti interessa, puoi usare ad esempio
href="#" : e` un valore valido (sposta la pagina in cima).
Poi occorre disabilitarne la funzione con il return false alla fine del JS.
L'evento onclick fa partire il JS.

quello che non ho capito è come deve essere fatta la funzione associata ai click...

Una prima bozza di funzione te l'ho fatta. Nell'evento c'e` la chiamata, nel file JS (esterno) c'e` la funzione completa. Nel caso della funzione cosi` elementare, non servirebbe inserire il JS inun file esterno, ma i tuoi desiderata sono un po' alti, e scrivere tutto dentro l'evento non e` proponibile.

Comunque per le prime prove potrebbe bastare:
onclick="alert('trovato!!'); return false;"

e poi come trovo le cordinate precise per posizionare il bottone

Non e` un bottone. E` semplicemente un'area che viene determinata dalle sue coordinate.
La cosa piu` semplice e` usare un rettangolo. Quindi:
<area shape="rect" coords="..." href="#" onclick="..." />
nelle coordinate dovrai metterci un quadratino. Ma per le prove un px e` troppo piccolo (poi, quando funziona, puoi divertirti a rimpicciolirlo), per cui ti propongo un 5x5:
Se ad esempio vuoi individuare il punto posto nell'immagine a 100x70, coords potrebbe contenere:
coords="98,68,102,72"
Vedi ad esempio la pagina http://w3schools.com/tags/tag_area.asp e link contenuti

[antonywest]

ho fatto questo e ovviamente devo ancora inserire tutto all'interno dei tag html per vedere se funziona


<img src=”PAGLIAIO2.jpg” width="220" height="235" border="1" usemap="pagliaio">

<map name=”pagliaio”>
<area shape="rect" coords="100,200,105,205" href="#" onclick="cliccato(); return false;">
</map>

function cliccato() {
alert('COMPLIMENTI !HAI RESO POSSIBILE L'IMPOSSIBILE!!CONSIGLIA QUESTO SITO AD UN AMICO');
return;
}