Les vitraux sont en surbrillance quand ils sont sélectionnés pour un changement de place

code/index.css

@@ -67,3 +67,23 @@
     background-position: center;
     background-size: cover;
   }
+
+  .vitrail-select {
+    margin: 3px;
+    padding: 6px;
+    background-image: url(ress/fond_fin.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border: 5px solid red;
+  }
+
+  .vitrail-hover {
+    margin: 3px;
+    padding: 6px;
+    background-image: url(ress/fond_fin.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border: 5px solid blue;
+  }

code/index.html

@@ -160,7 +160,7 @@
                         drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                     }
                     //else
-                        //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
+                    //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                 }
             }
         }
@@ -311,6 +311,7 @@
         function rotationManager(e)
         {
             canvasNumber=e.currentTarget.id.substring(6);
+            document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
             if(mousePos[0]=="R" && canvasNumber!="R")
             {
                 if(!isVisible(canvasNumber))
@@ -420,40 +421,67 @@
             toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
             toutDessiner(tabTotal,canvasT,ctxT);
         }
+        /*
+        function events() {
+            for(var i=1;i<5;i++)
+            {
+                lecanvas="canvas"+i
+                eval("canvas"+i).addEventListener("mousedown",function(e){
+                    mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+                    document.getElementById(lecanvas).classList.add('vitrail-select');
+                });
                 
+                eval("canvas"+i).addEventListener("mouseup",function(e){
+                    rotationManager(e);
+                })
+            }
+        }*/
         
         canvas1.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas1").classList.add('vitrail-select');
+        })
+        canvas2.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas2").classList.add('vitrail-select');
+        })
+        canvas3.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas3").classList.add('vitrail-select');
+        })
+        canvas4.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas4").classList.add('vitrail-select');
         })
         
         canvas1.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas2.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas2.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas3.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas3.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas4.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas4.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
+        
+        canvas4.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas4").classList.add('vitrail-hover');
+        })
+        
+        canvas4.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas4").classList.remove('vitrail-hover');
+        })
+        
         canvasR.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
         })
@@ -467,7 +495,7 @@
         tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[1,1,"purple"]);
+        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         
         /*
         tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
@@ -481,7 +509,7 @@
         toutDessiner(tab3,canvas3,ctx3);
         toutDessiner(tab4,canvas4,ctx4);
         
-        
+        //events();