Scratch area

Commenter

Contenu du snippet

Case à gratter !

Choisissez un conteneur en javascript et il devient caché par un overlay à gratter à la souris !

Bon c'est moche mais avec un peu d'amélioration sa pourrait devenir sympa...
Désolé pour les styles en javascript mais sa évite de mettre du css.

Fonctionne sous FF 3.6 et IE 8, sous Chrome aussi mais il y a un petit bug

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

	<title>Scratch area</title>
	
	<script type="text/javascript">
		
		function scratch(element)
		{
			casesize = 2;
			
			var x = parseInt(element.offsetLeft);
			var y = parseInt(element.offsetTop);
			var width = parseInt(element.offsetWidth);
			var height = parseInt(element.offsetHeight);
			
			var table = document.createElement("table");
			table.style.borderSpacing = 0;
			table.style.border = 0;
			table.style.position = "absolute";
			table.style.width = width + "px";
			table.style.height = height + "px";
			table.style.left = x + "px";
			table.style.top = y + "px";
			table.style.cursor = "pointer";
			
			var cases = new Array(width);
			
			for(var tr = 0; tr < parseInt(height / casesize) + casesize; tr += casesize)
			{
				var row = document.createElement("tr");
				
				cases[tr] = new Array(width);
				
				for(var td = 0; td < parseInt(width / casesize) + casesize; td += casesize)
				{
					cases[tr][td] = document.createElement("td");
					cases[tr][td].style.padding = 0;
					cases[tr][td].style.width = casesize + "px";
					cases[tr][td].style.height = casesize + "px";
					cases[tr][td].style.borderSpacing = 0;
					cases[tr][td].style.backgroundColor = "#000000";
					
					addEvent(tr, td);
					
					row.appendChild(cases[tr][td]);
				}
				
				table.appendChild(row);
			}
			
			element.parentNode.appendChild(table);
			
			function addEvent(r, d)
			{				
				cases[r][d].onmouseover = function()
				{
					this.style.backgroundColor = "transparent";
					
					for(var i = casesize * -1; i <= casesize; i += casesize)
						for(var j = casesize * -1; j <= casesize; j += casesize)
						{
							if(i * j == 0)
							{
								try{
									cases[r + j][d + i].style.backgroundColor = "transparent";
								}catch(e){}
							}
						}
				}
			}
		}
		
	</script>
	
</head>

<body>
	
	<div id="code" style="margin: auto; width: 400px; height: 80px; line-height: 80px; font-size: 40px; font-weight: bold; text-align: center; border: 1px inset;">Vous avez... PERDU !</div>
	
	<script type="text/javascript">
		scratch(document.getElementById("code"));
	</script>
	
</body>
</html>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_heycraft)