L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle
     ClickInText
     XooIt

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
121715 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kit graphique
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Créer un forum
     Le PHP facile
     Comscripts
     Liens sponsorisés
     Blog
     Page Rank
     Gifs animés, f...
     Poésie et cita...
     Easy-script.com
     Web creation ...
     Je crée mon site
     Azote.org - no...
     Outils de créa...
     K i s s design
     Electroniq...
     L'histoire d'a...
     Les autres
     Votre site ici ?


Effet de gratteur sur une image

Script posté par :

@ NBF
Vous aussi, postez vos scripts en cliquant ici.


Description

Ce script crée l'illusion de gratter pour découvrir l'image qui se cache en dessous. Utilisez vos propres images pour un meilleur résultat. :)


Compatibilité :

 FireFox : Toutes versions
 Mozilla : 1 et +
 Netscape Navigator : 1 et +
 Internet Explorer : 1 et +
Ce script utilise le DHTML


Chiffres :

Date de création : 3/02/2005
Dernière modif : -
Visites de la page : 83321
Envois par mail : 1104


Exemple :




Le code :

Entre <HEAD> et </HEAD> :


Entre <BODY> et </BODY> :


L'image noire :

Telechargez l'image noire sur votre serveur :


Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript


Les annotations des visiteurs :

De perrault - le 28-02-2005
Trés bien ce Script, mais simple question : comment faire pour que l'image soit centrée sur la page.

Par défaut elle est toujours à gauche !!

Merci de nous faire part de ce détail non négligeable !!!
De Julien_ - le 14-04-2005
il sufit de mettre les balise <center></center>
De gto94 - le 04-05-2005
Bjr je 'ai pas de bases en java mais un pt peu en prog... et je n'arrive pas a faire fonctionner et le modifier le script, ds la config de base (celle que j'ai copier-coller) j'ai l'image du logo et deux carré noir un en haut a droite et l'autre a gauche deplus la fct grattage ne fonctionne pas... enfin pr les deux carrés noir... Aussi je n'arrive pas a changer l'@ du fichier logo et black (pr prendre une image perso). Merci de bien vouloir me donner un pt coup de main svp. a+
De titeuf85 - le 06-05-2005
Je l'ai essayé sur mon site mais sa ne marche pas.
De Coxinelle06 - le 17-03-2006
Ton script est GENIAL !
Il permet de réaliser quelque chose qui était jusqu'alors impossible sans passer par du flash.
Chez moi ca marche impeccable.
MERCI encore !
De Aurel_YP - le 10-06-2006
Bonjour,

J'ai retouché le script pour que les carrés s'affichent avant l'image (ce qui me parait indispensable ici)

<head>
<script language="Javascript">
// MODIFIEZ CES VALEURS
image_larg = 100;
image_haut = 100;


// **** Ne pas modifier

table_haut = image_haut + 2;
table_larg = image_larg + 2;


// *****


function gratteux()
{
for(i = 0; i < (image_haut/5); i++)
{
for(j = 0; j < (image_larg/5); j++)
{
document.write("<img src='black.jpg' style='padding-top:1px;padding-left:1px;position:absolute;top:"+(i*5)+";left:"+(j*5)+";width:5;height:5;cursor:hand;' onmouseover='this.style.visibility=\"hidden\";' onmouseout='this.style.visibility=\"hidden\";'>")
}
}
}
</script>
</head>
<body>
<script language="Javascript">

document.write('<div style="position:relative;width:'+image_larg+';height:'+image_haut+'">');
gratteux();
document.write('<table width="' + table_larg + '" cellpadding="0" cellspacing="0" height="' + table_haut +'" background="lapin.jpg" style="border:1px solid"><tr><td> </td></tr></table>')


document.write('</div>');
</script>

</body>
De Le_Knar - le 02-09-2006
Au lieu de mettre du noir sur l'image on pourrait pas mettre une autre image ?
De vincent2222 - le 11-01-2007
si, mais il faut que l'image sit de la meme taille que le petit carré noir.
De silex - le 06-02-2007
Bonjour,
je viens tout juste de commencer a créer des sites pour le fun. Et je suis très mauvais. J'ai vraiment adoré ce script est jaimerai bien que quelqu'un de fort me dise exactement ce qu'il faut faire pour le mettre sur un site:

Si une personne me repond, il faut qu'elle sache que je suis vraiment nul donc il faut qu'elle soit le plus clair possible meme si ca lui parait completement évident.
Je vs remerci tous.
a biento
De sarahwitch - le 09-04-2007
Pout ne pas mettre l'image noire, tu dois remplacer :

("<img src='http://www.editeurjavascript.com/scripts/img/black.jpg'

par l'adresse de ton image :

("<img src='http://www.ton-site.com/images/ton-image.gif'
De epseud - le 18-08-2007
Bonjour,
Je réitère la question : ne peut-on pas mettre autre chose que du noir ?
Merci
De ambrejoy - le 24-10-2007
Bonsoir,

J'ai réellement cherché où mettre les balises <center> et </center> j'ai même réussi à centrer tte ma page mais pas le script "grattage" alors pitié aidez moi ...

Merci
De ambrejoy - le 24-10-2007
Bonsoir,

J'ai réellement cherché où mettre les balises <center> et </center> j'ai même réussi à centrer tte ma page mais pas le script "grattage" alors pitié aidez moi ...
Et puis également c'est un peu long de tt gratter (j'ai essayé !!!) comment agrandir le petit carré noir ? Que dois-je changer ds le script svp ?

Merci
De Yago - le 24-04-2008
J'adore ce sript mais j'aimerais pouvoir changer d'image qu'en faite par exemple il y en ai 3 différentes et que sa en tire une au hasard une différente à chaque fois ...
Comment faire pour modifier le script de façon à que ca puisse le faire ?
De moicjm - le 05-09-2008
Bonjour,

J'ai exactement le meme probleme que gto94 : J'ai 2 carrés : 1 en haut à gauche et l'autre en haut à droite et rien ne fonctionne... C'est balot...! Merci de votre aide... JM
De pizzatoy - le 08-10-2009
> moicjm
> gto94
si le script ne marche pas voir votre <!DOCTYPE>

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

ça ne marche pas ! On a seulement l'image du fond et 2 carrés noirs.

Faites l'essais avec le script pur (sans <!DOCTYPE>) et là vous aurez la même démo que sur cette page.

Regardez la source de cette page (editeurjavascript.com) il n'y a pas de <!DOCTYPE> annoncé.

De steven1809 - le 21-09-2010
bonjour,
je voudrais en fait masquer une image et faire apparaitre à chaque clic quelques pixels (excatement comme avec le gratteur) comment puis-je faire ?
en fait je peux faire comme le gratteur le seul souci est que je voudrais sauvegarder l'image dans l'état ou elle se trouve (donc avec fond noir) car quand je copie le carré noir apres un peu avoir gratter je colle et j'obtiens l'image compléte alors que je voudrais l'image que je vois à l'écran
je vous en remercie
De steven1809 - le 21-09-2010
Etant débutant également pouvez-vous me dire quel langage vous utilisez et comment sauvegarder ?
je vous en remercie
De racemul - le 18-12-2010
le script est bien, mais comment faire pur avoir une image aléatoire en dessous ? le script retouché n'empéche pas de voir l'image caché, sé domage

>> Poster une annotation sur ce script






compteur gratuit
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
iFrance Pro
Reposant sur une plateforme technique vraiment performante, iFrance pro propose des offres vraiment tres interessantes, nom de domaine offert, à partir de 5 € / mois !
http://www.ifrancepro.com/
Cat : Hebergement web
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
65912 membres
4797 comptes CountUs
1839 comptes myCircle

     LES FORUMS :
14 forums
40353 topics
191677 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Hebergement / Linux" du jour par caaptusss
Lorsque vous choisissez votre hébergment, ne prenez pas trop large ! 150 Mo suffisent largement pour un site qui n'a que quelques dizaines de pages ! Vous pourrez alors agrandir votre espace au fur et à mesure que vous en aurez besoin !
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2012 EJS - Tous droits réservés | CNIL N° 844440 | 04/02/2012 04:01:32 | Design by | Gen. en 0.495 sec.