Scratch area

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 658 fois - Téléchargée 15 fois

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

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.