Petit editeur d icone

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

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)