Skipstorm

La soluzione che vi propongo oggi riguarda la creazione di una mappa immagine dove le aree vengono evidenziate al passaggio del mouse, qualcosa di simile all’immagine qua sotto.

Per farlo senza ricorrere ad html5 esistono principalmente due modi:

1. Utilizzare un’overlay con un div e css. Elegante ma limitato alle forme rettangolari.
2. Sostituire l’immagine. Un po macchinoso soprattutto quando ci sono molte aree cliccabili.

Prosegui la lettura…

Ecco un piccolo esempio dove mostro come verificare che le password inserite in una registrazione siano le stesse prima di inviare i dati del form.
Quello che si fa in questi casi è catturare l’invio del form con l’evento onsubmit e chiamare la nostra funzione che fa inviare i dati solo se i dati sono corretti, in questo modo:

<script type=“text/javascript”>
// La nostra funzione
// Restituisce true se tutto è ok, false altrimenti

function controllacampi(){

var pass1 = document.formregistrazione.pass1.value;
var pass2 = document.formregistrazione.pass2.value;

if(pass1 == pass2)
return true;

else{
alert(“Le password non coincidono.”);

return false;

}
}
</script>

Il form html dove viene chiamata la nostra funzione all’onsubmit

<form method=”post” name=”formregistrazione” action=”registrazione.php” onsubmit=”controllacampi();”>

…

Anche se controllate questi dati tramite javascript dovete comunque ricontrollarli in php perchè un utente potrebbe avere javascript disabilitati o manipolare la pagina html, per saperne di più potete consultare l’articolo sui form dove spiega anche come ottenere i dati inviati in php.

Non è mai una buona scelta inserire gli indirizzi email direttamente nella pagina dato che gli spam bot sono alla continua ricerca di indirizzi email verso i quali inviare spam.

Facendo una ricerca si trovano diversi script javascript per la protezione degli indirizzi ma li ho trovati un po obsoleti.

Prima di tutto fanno una document write per la quale bisogna inserire il tag script all’interno della pagina. Secondo, molti  non fanno altro che unire ‘nome’ + ‘@’+ ’server.bla’, sai che difficile capire che la c’è un indirizzo email.

Credo che questo script offra una protezione migliore e un utilizzo più semplice, soprattutto se avete pagine dinamiche.

Per il funzionamento richiede jQuery e il plugin base64.

<script type="text/javascript">
 /*
 * Protezione contro spam bot per le email
 * Inserire lo script nell'head e includere jquery e il plugin base64
 * Se vi piace questo script lasciate questo URL http://www.skipstorm.org
 */

 $(document).ready(function(){
 $('.email').each(
 function(){
 var address = $.base64Decode($(this).attr('rel'));
 $(this).attr('href', 'mailto:'+address);
 $(this).text(address);
 }
 );
 });
 </script>

che cosa fa lo script, una volta caricato il documento per ogni tag con la classe email (o cambiatela con quello che preferite) dall’attributo rel, dove si aspetta l’indirizzo encodato in base64, crea link e testo.

Nella pagina gli indirizzi risulteranno come questo qua sotto

<p>Email: <a rel="ZW1haWxAZW1haWwuY29t" class="email">Devi avere javascript abilitato per visualizzare questo indirizzo.</a></p>

Se generate le pagine serverside non vi sarà difficile trovare o creare uno script per convertire gli indirizzi, se vi serve un convertitore potete inserire questo bottone in una pagina dove avete incluso gli stessi script richiesti da quello qua sopra.

<input type="text" id="base64input" /><button onclick="$('#base64input').attr('value' , $.base64Encode($('#base64input').attr('value')));">Encode</button>