Discussion :

[yohan0262]

Parfait et encore merci à toi gwyohm !

Il y a juste quelques petits décalages puisque le coin haut gauche des images, se place aux coordonnées enregistrées... Existe t-il une méthode capable de faire en sorte que les coordonnées enregistrées correspondent au "centre de gravité" (intersection des diagonales) de l'image ?

Pour que vous compreniez mieux voici la comparaison avant/après (envoyé/récupéré) :



J'ai beau cherché mais la chose étant plutôt compliquée à décrire par intitulé dans google, ça ne donne pas grand chose...

[gwyohm]

En fait au moment ou ton drag se fini, il faudrait que tu recuperes les coordonnees de l'image et ne pas stocker celle de ta souris: selon l'endroit où tu attrapes l'image, tes coordonnées seront plus ou moins fausses. (c'est je pense l'ecart que tu as géré pendant le drag)

Au moment du drop :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
var p_posX = objectToDrag.style.left.replace(/px/, "");
var p_posY = objectToDrag.style.top.replace(/px/, "");

[yohan0262]

En fait au moment ou ton drag se fini, il faudrait que tu recuperes les coordonnees de l'image et ne pas stocker celle de ta souris: selon l'endroit où tu attrapes l'image, tes coordonnées seront plus ou moins fausses. (c'est je pense l'ecart que tu as géré pendant le drag)

Au moment du drop :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
var p_posX = objectToDrag.style.left.replace(/px/, "");
var p_posY = objectToDrag.style.top.replace(/px/, "");

Encore une bonne réponse, tu es incollables sur le Javascript !

De toute façon il faut le dire, c'est toi qui est à l'origine de ma réussite et je t'en remercie ! Je déclare ce sujet comme résolu et espère qu'il aidera d'autres personnes qui auront quelque chose de similaire à réaliser.

Encore merci et à bientôt !

[yohan0262]

Bonsoir à tous

je me permet de ré-ouvrir ce post car je viens de me rendre compte de quelques problèmes de compatibilité entre navigateur. Je préfère ré-ouvrir le topic, au moins vous avez à disposition tout ce qu'il faut (codes etc...). Voici la synthèse que j'ai pu relever :

Firefox 3.5.4 :
- Côté admin : aucun problème de pratique
- Côté public : aucun problème d'affichage

IE 8 :
- Côté admin : pratique fastidieuse
- Côté public : aucun problème d'affichage

IE 7 :
- Côté admin : aucun problème de pratique
- Côté public : problème d'affichage (les images ne sont pas restituées)

IE 6 :
- Côté admin : aucun problème de pratique
- Côté public : problème d'affichage (les images ne sont pas restituées)

J'aimerais donc corriger les problèmes de resitution d'images, connus avec IE 7 (je pense que cela devrait corriger IE6 en même temps, sinon tant pis... Arrivé un jour, il faut se mettre à jour...)

Auriez-vous une solution pour remédier à ce problème ?

Pour informations : Sur IE7, une erreur est signalé par un petit panneau jaune en bas gauche du navigateur. Généralement il y en a deux :

1 - chaîne ou identificateur attendu
2 - objet attendu

La seconde pointe pointe envers les signatures correspondant aux objets qui doivent être restitués. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="soleil1" onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();">
<img id="soleil"  src="./picto/soleil.png" onMouseDown="cache(this);" onMouseUp="affiche(this);"/>	</div>

Pour rappel, voici les fonctions permettant la restitution des images :

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
<script>	
var imagesPath = {
  "soleil" : "./picto/soleil.png",
  "peunuageux" : "./picto/peunuageux.png",  
  "mitige" : "./picto/mitige.png",
  "tresnuageux" : "./picto/tresnuageux.png",
  "couvert" : "./picto/couvert.png"  
  etc; etc; etc.......
};
 
function getImageFromIdOrCreate(id) {
  var image = document.getElementById(id);
  if(! image) {
    var key = id.replace(/\d+$/, "");
    image = document.createElement("img");
    image.src = imagesPath[key] ;
    document.getElementById("tobackground").appendChild(image);
  }
  return image;
}
 
function load(){
	var allCoords = eval("(<?php echo $json?>)"); 
 
	for(var imageid in allCoords) {
	  var coord = allCoords[imageid];
	  var image = getImageFromIdOrCreate(imageid);
 
		if(coord.top < 480){
			if(coord.left < 480){
			  image.style.position = "absolute";
			  //alert("coord top :" + coord.top);
			  //alert("coord left :" + coord.left);	  
			  image.style.left = + coord.left + "px";
			  image.style.top = + coord.top + "px";
			}		
			else{
				image.style.visibility = "hidden"; 	
			}
		}
		else{
		image.style.visibility = "hidden"; 			
		}	
	}
}
 
</script>

[gwyohm]

Salut

dans ta décaration de imagesPath, tu n'aurais pas une virgule à la fin avant le } ?

[yohan0262]

Si en effet... et ça marche très bien sans... Je ne regardais vraiment pas de ce côté là...

Merci et bonne journée !