Juste un petit code pour passer le temps, je rajouterai quelques fonctionnalités quand j'aurai un peu de temps.

Testé et fonctionnel sur Firefox2 et IE6.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
window.onload = setPalette;
 
var epaisseur = 2;
var color = "000000";
 
function move(e){
   obj = document.getElementById('palette');
   obj.onmousemove = createForme;
   obj.onmouseup = function(){
                     obj.onmousemove = '';
                  }
}
 
function createForme(e){
   obj = document.getElementById('palette');
   obj.onmouseout = function(){
                     obj.onmousemove = '';
                  }
   var div = document.createElement('div');
   div.style.position = "absolute";
   div.style.width = epaisseur + "px";
   div.style.height = epaisseur + "px";
   div.style.overflow = "hidden";
   if(document.all){
      div.style.top = event.offsetY - epaisseur / 2 + "px";
      div.style.left = event.offsetX - epaisseur / 2 + "px";
   }
   else{
      div.style.top = e.layerY - epaisseur / 2 + "px";
      div.style.left = e.layerX - epaisseur / 2 + "px";
   }
   div.style.background = "#" + color;
   div.zIndex = "0";
   obj.appendChild(div);
 
   if(document.all){
      if(event.offsetX < epaisseur / 2 || event.offsetY < epaisseur / 2
        || event.offsetX > document.getElementById('palette').offsetWidth - 4 - epaisseur / 2
        || event.offsetY > document.getElementById('palette').offsetHeight - 4 - epaisseur / 2){
         obj.onmousemove = '';
      }
   }
   else{
      if(e.layerX < epaisseur / 2 || e.layerY < epaisseur / 2
        || e.layerX > document.getElementById('palette').offsetWidth - 4 - epaisseur / 2
        || e.layerY > document.getElementById('palette').offsetHeight - 4 - epaisseur / 2){
         obj.onmousemove = '';
      }
   }
}
 
function setPalette(e){
   document.getElementById('palette').onmousedown = function(){
                                          move(e);
                                       }
 
   var tEpaisseur = document.getElementsByName('epaisseur');
   var getEpaisseur = "epaisseur" + epaisseur;
 
   for(var i = 0; i < tEpaisseur.length; i++){
      if(tEpaisseur[i].id == getEpaisseur){
         tEpaisseur[i].className = "activeButton";
      }
      else{
         tEpaisseur[i].className = "";
      }
      tEpaisseur[i].onclick = setOnClickButtonEp;
      tEpaisseur[i].onclickArguments = [e,tEpaisseur[i]];
   }
 
   var tColor = document.getElementsByName('colors');
   var getColor = "colors" + color;
 
   for(var i = 0; i < tColor.length; i++){
      tColor[i].onclick = setOnClickButtonCo;
      tColor[i].onclickArguments = [e,tColor[i]];
      tColor[i].style.background = "#" + tColor[i].id.substring(6);
      tColor[i].style.width = "20px";
   }
 
   document.getElementById('color').style.background = "#" + color;
}
 
function setOnClickButtonEp(e){
   epaisseur = this.onclickArguments[1].value;
   setPalette(e);
}
 
function setOnClickButtonCo(e){
   color = this.onclickArguments[1].id.substring(6);
   setPalette(e);
}
URL de test : http://josselin.willette.free.fr/codessources/painter/

Mis à part le fait que le trait ne soit pas continu, des remarques ?

Edit : Ah, aussi, le redimensionnement de la fenêtre n'est pas géré.