Commit b8c1c04b authored by Philippe Dpt35's avatar Philippe Dpt35

Zoom des images pendant le déplacement

parent 0722ca62
......@@ -63,27 +63,27 @@ img#poubelle {
}
.enclos img.animal1 {
height: 50px;
width: 36px;
height: 51px;
width: 54px;
}
.enclos img.animal2 {
height: 50px;
width: 40px;
height: 54px;
width: 44px;
}
.enclos img.animal3 {
height: 49px;
width: 74px;
height: 54px;
width: 61px;
}
.enclos img.animal4 {
height: 46px;
width: 33px;
height: 52px;
width: 31px;
}
#reserve {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 40%;
width: 195px;
width: 205px;
margin-left: auto;
margin-right: auto;
}
......
......@@ -33,10 +33,10 @@ On les supprime en les faisant glisser dans le trou du bas.</p>
</div>
<div id="reserve">
<img src="lapin.png" id="animal1" class="animal1" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="mouton.png" id="animal2" class="animal2" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="vache.png" id="animal3" class="animal3" alt="animal3" draggable="true" ondragstart="drag(event)">
<img src="poule.png" id="animal4" class="animal4" alt="animal4" draggable="true" ondragstart="drag(event)">
<img src="img/lapin.png" id="animal1" class="animal1" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="img/mouton.png" id="animal2" class="animal2" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="img/vache.png" id="animal3" class="animal3" alt="animal3" draggable="true" ondragstart="drag(event)">
<img src="img/poule.png" id="animal4" class="animal4" alt="animal4" draggable="true" ondragstart="drag(event)">
</div>
<div id="ligne2" class="ligne">
......@@ -53,7 +53,7 @@ On les supprime en les faisant glisser dans le trou du bas.</p>
</div>
<div id="espacement">
<img src="trou4.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)"></div>
<img src="img/trou4.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)"></div>
</div>
<script src="alacampagne.js" type="text/javascript"></script>
......
......@@ -11,6 +11,14 @@ for (var i=0; i<4; i++) {
var difficulte = "";
var informationsObjet = document.getElementById("informations");
var Poubelle = document.getElementById("poubelle");
var zoomAnimal1 = document.createElement("img");
zoomAnimal1.src = "img/lapin-zoom.png";
var zoomAnimal2 = document.createElement("img");
zoomAnimal2.src = "img/mouton-zoom.png";
var zoomAnimal3 = document.createElement("img");
zoomAnimal3.src = "img/vache-zoom.png";
var zoomAnimal4 = document.createElement("img");
zoomAnimal4.src = "img/poule-zoom.png";
var btNiveau1 = document.getElementById("Niveau1");
var btNiveau2 = document.getElementById("Niveau2");
......@@ -140,8 +148,7 @@ function verification() {
document.getElementById(IdErreur).innerHTML = "";
}
else {
/* document.getElementById(IdErreur).innerHTML = '<img src="croix.png" width="96px" height="96px">';*/
document.getElementById(IdErreur).innerHTML = "X";
document.getElementById(IdErreur).innerHTML = "X";
erreur = true;
}
}
......@@ -214,28 +221,49 @@ function getImgAnimalparEnclos() {
for (var i=0; i<4; i++) {
switch(AnimalparEnclos[i]) {
case 0:
imgAnimalparEnclos[i] = "lapin-mini.png";
imgAnimalparEnclos[i] = "img/lapin-mini.png";
break;
case 1:
imgAnimalparEnclos[i] = "mouton-mini.png";
imgAnimalparEnclos[i] = "img/mouton-mini.png";
break;
case 2:
imgAnimalparEnclos[i] = "vache-mini.png";
imgAnimalparEnclos[i] = "img/vache-mini.png";
break;
case 3:
imgAnimalparEnclos[i] = "poule-mini.png";
imgAnimalparEnclos[i] = "img/poule-mini.png";
break;
}
}
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var infosObjet;
function afficheImgZoom(animal) {
switch(animal) {
case 'animal1':
ev.dataTransfer.setDragImage(zoomAnimal1, 0, 0);
break;
case 'animal2':
ev.dataTransfer.setDragImage(zoomAnimal2, 0, 0);
break;
case 'animal3':
ev.dataTransfer.setDragImage(zoomAnimal3, 0, 0);
break;
case 'animal4':
ev.dataTransfer.setDragImage(zoomAnimal4, 0, 0);
break;
}
}
infosObjet = ev.target.alt + "-" + ev.target.id + "-" + ev.target.parentNode.id;
afficheImgZoom(ev.target.id);
ev.dataTransfer.setData("text", infosObjet);
}
......
poule.png

6.46 KB | W: | H:

img/mouton-mini.png

5.13 KB | W: | H:

poule.png
img/mouton-mini.png
poule.png
img/mouton-mini.png
  • 2-up
  • Swipe
  • Onion skin
poule-mini.png

4.57 KB | W: | H:

img/poule-mini.png

4.37 KB | W: | H:

poule-mini.png
img/poule-mini.png
poule-mini.png
img/poule-mini.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment