Un script (trouvé sur www.24fun.ch) idéal pour loteries, quizz ou autres devinettes. On gagne à tous les coups au grattage !!!!
Démo : Survolez la zone de grattage avec la souris.
Etape 1 : Ajouter dans le <HEAD> :
<SCRIPT> <!-- // Copyright Peter Gehrig and Urs Dudli at www.24fun.ch/ // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // La largeur de l'image var imgwidth=265 // La hauteur de l'image var imgheight=90 // Le nom de l'image de couverture et de l'image cachée var coverimage="COVER.gif" var hiddenimage="PUBHTM.gif" // L'URL du lien sur l'image cachée urlhiddenimage="URL.htm" // La position horizontale de l'image par rapport au bord gauche de la fenêtre var x_finalpos=195 // La position verticale de l'image par rapport au bord supérieur de la fenêtre var y_finalpos=20 // Le nombre de découpes par ligne // Plus la valeur est élevée, plus l'effet sera lent // Number of sliced cells. A high value will slow down the scratching-effect. var x_slices=8 // Le nombre de lignes pour la découpe // Plus la valeur est élevée, plus l'effet sera lent var y_slices=6 //////////////////////////////////////////////// img1=new Image() img1.src=coverimage img2=new Image() img2.src=hiddenimage var xy_slices=x_slices*y_slices var width_slice=Math.floor(imgwidth/x_slices) var height_slice=Math.floor(imgheight/y_slices) var cliptop=0 var clipbottom=height_slice var clipleft=0 var clipright=width_slice var spancounter=0 function checkbrowser() { if (document.all) { initiate() } } function initiate() { spancounter=0 for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") thisspan.posLeft=x_finalpos thisspan.posTop=y_finalpos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright+=width_slice spancounter++ } clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice } for (i=0;i<=xy_slices-1;i++) { var thisspan=eval("span"+i) thisspan.innerHTML="<a href='#' onMouseOver='scratchimg("+i+")'><img src='"+coverimage+"' border='0'></a>" } } function scratchimg(thispartofimage) { var thisspan=eval("span"+thispartofimage) thisspan.innerHTML="<a href='"+urlhiddenimage+"' target='_blank'><img src='"+hiddenimage+"' border='0'></a>" } function scratchnn() { document.imgcontainer1.document.write("<a href='"+urlhiddenimage+"'><img src='"+hiddenimage+"' border='0' target='_blank'></a>") document.imgcontainer1.document.close() } // --> </SCRIPT> <STYLE>.spanstyle { LEFT: -5000px; POSITION: absolute } </STYLE>
On doit configurer quelques variables au début du script.
Etape 2 : Ajouter dans la balise <BODY> :
<BODY onload=checkbrowser()>
Etape 3 : Ajouter juste après la balise <BODY> :
<SCRIPT> <!-- if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { document.write("<div id='span"+spancounter+"' class='spanstyle' border='0'>") document.write("</div>") spancounter++ } } } if (document.layers) { document.write("<div id='imgcontainer1' class='spanstyle'>") document.write("<a href='#' onMouseOver='scratchnn()'><img src='"+coverimage+"' border='0'></a></div>") document.close() document.imgcontainer1.left=x_finalpos document.imgcontainer1.top=y_finalpos } // --> </SCRIPT>
