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);
} |
Partager