1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Petit editeur d icone

Petit editeur d icone

Soyez le premier à donner votre avis sur cette source.

Snippet vu 13 128 fois - Téléchargée 25 fois

Commenter

Contenu du snippet

Juste pour le fun.
Je pense que le code source est interessant pour les debutants.
Maintenant, la finalité c'est a vous de la trouver

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
  .editeur table{
   border :2px solid black;
   position : absolute;
   top :0px;
   left :0px;
   background-color :#fff;
   }
   .editeur td{
   border:2px solid black;
   width :13px;
   height :20px;
   font-size : 1px;
   cursor:hand;
   background-color :#fff;
   border-spacing:0px;
   }
   .editeur tr{
   border :2px solid black;
   }
   
   #couleurprise
   {
    border :2px solid black;
   }
   
   #couleurprise2
   {
    border :2px solid black;
   }
   
   .couleur table{
   border :3px solid black;
   position :absolute;
   }
   .couleur td{
   border :2px solid black;
   width:9px;
   height:15px;
   font-size:0px;
   }
   .couleur tr{
   border : 1px solid black;
   }
   
   .bloc{
    position : absolute;
    border : 2px solid black;
    background-color : #ccc;
   }
   
   .couleur  
  </style>
  </head>
  <body oncontextmenu="return false">
  <script>
  function carre( x, y, l, h, couleur ) {
  return  '<div style="position:absolute;'+
		'border-left:' + l +
		'px solid ' + couleur + ';'+
		'left:' + x + 'px;'+
		'top:' + y + 'px;'+
		'width : 0px;' +
		'height:' + h + 'px;'+
		'clip:rect(0,'+l+'px,'+h+'px,0);'+
		'background-color:' + couleur+
		';"><\/div>';
  }
  
  // De Dynamic drive
  var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function() 
  {document.onmousedown=this.drag; document.onmouseup=function()
  {this.dragapproved=0;} }, drag:function(e) { var evtobj=window.event? window.event : e; 
  this.targetobj=window.event? event.srcElement : e.target; if (this.targetobj.className=="bloc")
  {this.dragapproved=1; if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
  if (isNaN(parseInt(this.targetobj.style.top)))
  {this.targetobj.style.top=0;} this.offsetx=parseInt(this.targetobj.style.left);
  this.offsety=parseInt(this.targetobj.style.top); this.x=evtobj.clientX;
  this.y=evtobj.clientY; if (evtobj.preventDefault) evtobj.preventDefault(); 
  document.onmousemove=dragobject.moveit; } }, moveit:function(e){ var evtobj=window.event? window.event : e;
  if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"; 
  this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"; return false; } } } 
  // Fin Dynamic Drive
  dragobject.initialize();
  
  var coulglob = "FFF";
  var coulglob2 = "FFF";
  function getcolor(couleur)
  {
   document.getElementById("couleurprise").style.backgroundColor = "#"+couleur;
   coulglob = couleur;
  }

  function getcolor2(couleur)
  {
   document.getElementById("couleurprise2").style.backgroundColor = "#"+couleur;
   coulglob2 = couleur;
  }
  
  function edit(i,j)
  {
   var obj = document.getElementById("case"+i+","+j);
   obj.style.backgroundColor = "#"+coulglob;
   objapercu.innerHTML += carre(4+3*i,14+3*j,3,3,"#"+coulglob);
  }
  
  function edit2(i,j)
  {
   var obj = document.getElementById("case"+i+","+j);
   obj.style.backgroundColor = "#"+coulglob2;
   objapercu.innerHTML += carre(4+3*i,14+3*j,3,3,"#"+coulglob2);
  }
  
  
// Table couleur
  var tmp = '';
  var hex = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
  var cshor = 16;
  var csver = 16;
  tmp+='<div id="panneaucouleur" class="bloc" style="left:500px;"><br><table class="couleur">';
  for(j=0;j<csver;j++) {
   tmp+="<tr>";
  for(i=0;i<cshor;i++){
   id = "";'case'+i+','+j;
   couleur=''+hex[j]+''+hex[i]+''+hex[Math.abs(2*i-j)];
   fonction = 'onclick=getcolor("'+couleur+'") oncontextmenu=getcolor2("'+couleur+'")';
      
   
   tmp+='<td style="background-Color:#'+couleur+'" '+fonction+'>&nbsp;</td>';
  }
   tmp+="</tr>";
  }
  tmp+='<tr><td id="couleurprise" colspan="8">&nbsp;</td><td id="couleurprise2" colspan="8">&nbsp;</td></tr></table></div>';
  document.body.innerHTML += tmp;
  

// Table edition
  var tmp = '';
  var cshor = 20;
  var csver = 20;
  tmp+='<div id="edit" class="bloc"><br><table class="editeur" border style="border:1px solid black;">';
  for(j=0;j<csver;j++) {
   tmp+="<tr>";
  for(i=0;i<cshor;i++){
   id = 'case'+i+','+j;
   fonction = "onclick=edit("+i+","+j+") oncontextmenu=edit2("+i+","+j+")";
   tmp+='<td style="border:2px solid black;"  id="'+id+'" '+fonction+'>&nbsp;</td>';
  }
   tmp+="</tr>";
  }
  tmp+="</table></div>";
   
  tmp +='<div id="apercu" class="bloc" style="top:400px;left:500px;width:80px;height:90px"><br></div>';
  document.body.innerHTML += tmp;
  
  var objapercu = document.getElementById("apercu");
  </script>

  </body>
</html>

Conclusion :


Le Drag and Drop est de Dynamic Drive

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
132
Date d'inscription
dimanche 4 décembre 2005
Statut
Membre
Dernière intervention
3 décembre 2013
 1
J'ai un petit problème: L'image n'apparaît pas dans le petit carré. Je peux dessiner sans problème avec les couleurs et le grand éditeur, mais l'image n'apparaît pas.
Signaler
Messages postés
10
Date d'inscription
jeudi 10 avril 2003
Statut
Membre
Dernière intervention
6 décembre 2006
Bah figure toi JMeunieur que j'y avais pensé et que je l'ai largement amélioré ( il est toujours en test )
sur
http://www.tabnet.fr/gallery.php
Sachant qu'il faut s'inscrire sur http://www.tabnet.fr pour poster des images
Voila en tout cas merci de mavoir mis en credit ! ( si tu pouvais juste changer le lien en http://www.tabnet.fr )
Merci
Et merci pour les encouragements !
Signaler
Messages postés
86
Date d'inscription
mardi 10 septembre 2002
Statut
Membre
Dernière intervention
17 mai 2013
très bien fait ... félicitations !
Je l'ai un peu modifié (présentation et adaptation pour asp).

je l'ai mis en ligne sur
http://www.sesame-ouvre-toi.net rubrique : dessins
Signaler
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013
J'ai testé, j'ai vu, je suis convaincu !
A mon avis c'est une source à faire évoluer.

Bravo.

Nickadele
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 (biskbart)