Modification hauteur et largeur d'une image suite � un double-click sur une autre image

**LorenzoIlMagnifico** · 18/11/2009, 00h12

Bonjour,

je r�alise actuellement un site pour un ami auteur/�diteur, celui-ci contient plus d'une centaine de pages fixes � la structure identique. Pour gagner du temps, j'ai donc d�cid� d'utiliser PHP/MySQL pour les g�n�rer simplement.

Chaque page comporte principalement quelques images(vignettes) dispos�es au milieu de la page selon des informations contenues dans la base (top, left, height et width). De plus certaines images ont un effet de zoom en cas de survol de la souris, les informations de zoom sont �galement contenues dans la base de donn�es (hover_top, hover_left, hover_height et hover_width)

Pour pas passer un temps infini sur phpmyadmin � saisir des infos, j'ai cr�e une page php qui affiche la page normalement mais avec du drag/drop/resize d'image en JS. Ces mouvements d'images mettent � jour un formulaire sur ma page, et � l'enregistrement les champs sont cr��s/mis � jour dans la BDD.

Tout ceci fonctionne sans soucis!!

Le probl�me intervient quand je veux g�rer mon survol. Sur ma page d'�dition, je pensais basculer une image de la vue normale � la vue "survol" en cas de double-click sur l'image. Solution rapidement abandonn�e, la biblio que j'utilise pour le drag/drop interceptant les events onmousedown et empechant l'utilisation du ondblclick ...

Du coup je voudrais basculer en mode survol de l'image en double cliquant sa miniature pr�sente dans mon formulaire. L'interception du doubleclick fonctionne, d'ailleurs le changement de couleur de fond de la ligne du formulaire fonctionne.

Seul truc qui me rend dingue, c'est que j'ai beau faire, je n'arrive pas � modifier le style de l'image pour modifier sa position et sa taille! J'ai beau surveiller pas � pas le d�roulement de mon code JS, tout � l'air normal mais l'image ne fait rien ... Gggrrrr ...

Pour info le code HTML de la page g�n�r� par php :

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>La police des sentiments</title>
<head>

<link rel="stylesheet" type="text/css" href="pro_pullup_1/pro_pullup_1.css" />
<style type="text/css">
<!--
.global {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1100px;
}

-->
</style>

<body>
<script type="text/javascript" src="Include/wz_dragdrop.js"></script>
<div class="global" name="site_global">

<img src="Images/Chapeau-police-sentiments.jpg" width="1100" height="250" usemap="#Map" style="border:0;" />
<map name="Map" id="Map">
  <area shape="rect" coords="4,19,124,134" href="http://www.google.fr"/></map>
<img id='Image_1' src="Images/extraits.jpg" name="Image_1" style="position:absolute; top:270px; left:245px; width:127px; height:130px; z-index:0"/>
<img id='Image_2' src="Images/carton-wallet-police-sentiment.jpg" name="Image_2" style="position:absolute; top:270px; left:465px; width:300px; height:145px; z-index:0"/>
<img id='Image_3' src="Images/couverture.jpg" name="Image_3" style="position:absolute; top:217px; left:960px; width:129px; height:190px; z-index:0"/>
<img id='Image_4' src="Images/Presse.jpg" name="Image_4" style="position:absolute; top:425px; left:365px; width:101px; height:55px; z-index:0"/>
<img id='Image_5' src="Images/l'yves-wallet-20-12-89.jpg" name="Image_5" style="position:absolute; top:425px; left:710px; width:215px; height:215px; z-index:0"/>
<img id='Image_8' src="Images/legende-son.jpg" name="Image_8" style="position:absolute; top:650px; left:140px; width:401px; height:19px; z-index:0"/>
<img src="Images/Corps-site.jpg" width="1100" height="450" style="border:0;" />
<a href="http://www.google.fr"><img src="Images/zonecontact.jpg" width="100" height="90" style="border:0; position:absolute; top:610px; left:0px" /></a>

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="815" height="20" style="position:absolute; top:675px; left:140px">
	<param name="movie" value="player_mp3_maxi.swf" />
	<param name="FlashVars" value="mp3=Documents/numerozero.mp3&amp;autoplay=0&amp;showstop=1&amp;width=815" />

</object>
<form name='formulaire' method='post' action='saveImages.php?NomPage=LaPoliceDesSentiments'>
<input type='hidden' name='Id_Page' value='1'/>
<table border="solid 1px black" valign="middle">
<tr valign="middle"><td align="center">Image</td>
<td>Largeur</td>
<td>Hauteur</td>
<td>X</td>
<td>Y</td>
<td>Hover_Largeur</td>
<td>Hover_Hauteur</td>

<td>Hover_X</td>
<td>Hover_Y</td>
</tr><tr id='tr_1' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_2' value='1'/><td><img src="Images/extraits.jpg" width="80" height="81" ondblclick="DoubleClickImage(1)"/></td>
<td><input type='text' name='Largeur_1' value='127'/></td><td><input type='text' name='Hauteur_1' value='130'/></td><td><input type='text' name='X_1' value='245'/></td><td><input type='text' name='Y_1' value='270'/></td><td><input type='text' name='Hover_Largeur_1' value='0'/></td><td><input type='text' name='Hover_Hauteur_1' value='0'/></td><td><input type='text' name='Hover_X_1' value='0'/></td><td><input type='text' name='Hover_Y_1' value='0'/></td></tr>
<tr id='tr_2' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_3' value='2'/><td><img src="Images/carton-wallet-police-sentiment.jpg" width="80" height="38" ondblclick="DoubleClickImage(2)"/></td>
<td><input type='text' name='Largeur_2' value='300'/></td><td><input type='text' name='Hauteur_2' value='145'/></td><td><input type='text' name='X_2' value='465'/></td><td><input type='text' name='Y_2' value='270'/></td><td><input type='text' name='Hover_Largeur_2' value='575'/></td><td><input type='text' name='Hover_Hauteur_2' value='275'/></td><td><input type='text' name='Hover_X_2' value='375'/></td><td><input type='text' name='Hover_Y_2' value='220'/></td></tr>
<tr id='tr_3' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_4' value='3'/><td><img src="Images/couverture.jpg" width="80" height="117" ondblclick="DoubleClickImage(3)"/></td>
<td><input type='text' name='Largeur_3' value='129'/></td><td><input type='text' name='Hauteur_3' value='190'/></td><td><input type='text' name='X_3' value='960'/></td><td><input type='text' name='Y_3' value='217'/></td><td><input type='text' name='Hover_Largeur_3' value='0'/></td><td><input type='text' name='Hover_Hauteur_3' value='0'/></td><td><input type='text' name='Hover_X_3' value='0'/></td><td><input type='text' name='Hover_Y_3' value='0'/></td></tr>
<tr id='tr_4' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_5' value='4'/><td><img src="Images/Presse.jpg" width="80" height="43" ondblclick="DoubleClickImage(4)"/></td>
<td><input type='text' name='Largeur_4' value='101'/></td><td><input type='text' name='Hauteur_4' value='55'/></td><td><input type='text' name='X_4' value='365'/></td><td><input type='text' name='Y_4' value='425'/></td><td><input type='text' name='Hover_Largeur_4' value='0'/></td><td><input type='text' name='Hover_Hauteur_4' value='0'/></td><td><input type='text' name='Hover_X_4' value='0'/></td><td><input type='text' name='Hover_Y_4' value='0'/></td></tr>
<tr id='tr_5' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_6' value='5'/><td><img src="Images/l'yves-wallet-20-12-89.jpg" width="80" height="80" ondblclick="DoubleClickImage(5)"/></td>
<td><input type='text' name='Largeur_5' value='215'/></td><td><input type='text' name='Hauteur_5' value='215'/></td><td><input type='text' name='X_5' value='710'/></td><td><input type='text' name='Y_5' value='425'/></td><td><input type='text' name='Hover_Largeur_5' value='445'/></td><td><input type='text' name='Hover_Hauteur_5' value='445'/></td><td><input type='text' name='Hover_X_5' value='480'/></td><td><input type='text' name='Hover_Y_5' value='190'/></td></tr>
<tr id='tr_8' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_7' value='8'/><td><img src="Images/legende-son.jpg" width="80" height="3" ondblclick="DoubleClickImage(8)"/></td>
<td><input type='text' name='Largeur_8' value='401'/></td><td><input type='text' name='Hauteur_8' value='19'/></td><td><input type='text' name='X_8' value='140'/></td><td><input type='text' name='Y_8' value='650'/></td><td><input type='text' name='Hover_Largeur_8' value='0'/></td><td><input type='text' name='Hover_Hauteur_8' value='0'/></td><td><input type='text' name='Hover_X_8' value='0'/></td><td><input type='text' name='Hover_Y_8' value='0'/></td></tr>
</table></form>

<div class="global">
	<ul id="nav">
	<li class="top"><a href="#" id="page" class="top_link"><span class="down">Page</span></a>
		<ul class="sub">
			<li class="fly"><a href="newPage.php" class="fly">Nouvelle Page</a></li>
			<li class="fly"><a href="#" class="fly">Supprimer la page</a></li>
			<li class="fly"><a href="editPage.php?NomPage=LaPoliceDesSentiments" class="fly">Modifier la page</a></li>

			<li class="fly"><a href="#" class="fly">Chercher une page</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="vignettes" class="top_link"><span class="down">Vignettes</span></a>
		<ul class="sub">
			<li class="fly"><a href="addImage.php?NomPage=LaPoliceDesSentiments" class="fly">Ajouter une image</a></li>
			<li class="fly"><a href="editImage.php?NomPage=LaPoliceDesSentiments" class="fly">Editer les images</a></li>

			<li class="fly"><a href="#" class="fly">Zoom</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="liens" class="top_link"><span class="down">Liens</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>

	</li>
	<li class="top"><a href="#" id="sons" class="top_link"><span class="down">Sons</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="zones" class="top_link"><span class="down">Zones</span></a>

		<ul class="sub">
						<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="sauvegarde" class="top_link"><span class="down">Sauvegarde</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" onClick="document.forms['formulaire'].submit();" class="fly">Sauvegarder</a></li>

			<li class="fly"><a href="javascript:location.reload(true)" class="fly">Annuler</a></li>
		</ul>
	</li>
</ul>
</div></div>
<script type="text/javascript" src="Javascript/survol.js"></script>
<script type="text/javascript">
<!--

SET_DHTML(CURSOR_MOVE,SCALABLE,RESET_Z, "Image_1", "Image_2", "Image_3", "Image_4", "Image_5", "Image_8");

			
function my_DropFunc()
{
	var arraytokens = dd.obj.name.split('_');
	var Id_Vignette = arraytokens[1];
	document.getElementsByName(survolstring(Id_Vignette)+"Hauteur_"+Id_Vignette)[0].value = dd.obj.h;
	document.getElementsByName(survolstring(Id_Vignette)+"Largeur_"+Id_Vignette)[0].value = dd.obj.w;
	if (dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft <0 ) {
		dd.obj.moveTo(document.getElementsByName("site_global")[0].offsetLeft,dd.obj.y);
		document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = 0;
	}
	else {
		if (dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft > 1100 - dd.obj.w) {
			dd.obj.moveTo(document.getElementsByName("site_global")[0].offsetLeft + 1100 - dd.obj.w,dd.obj.y);
			document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = 1100 - dd.obj.w;
		}
		else {
			document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft;
		}
	}
	document.getElementsByName(survolstring(Id_Vignette)+"Y_"+Id_Vignette)[0].value = dd.obj.y;
}
//-->
</script>
</body>
</html>

Et le fichier js qui s'occuper de �� :

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
survol = 0;
 
function survolstring (Id_Image)
{
	//(survol==Id_Image) ? return "Hover_"; : return"";
	if (survol==Id_Image)
		return "Hover_";
	else
		return"";
}
 
function SwitchImagetoNormal (Id_Image)
{
	document.getElementById('img_'+Id_Image).style.height = document.getElementsByName('Hauteur_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.width = document.getElementsByName('Largeur_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.left = document.getElementsByName('Y_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.top = document.getElementsByName('X_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.zIndex = 0;
	document.getElementById("tr_"+Id_Image).style.backgroundColor="white";
 
	if (document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value == document.getElementsByName('Hauteur_'+Id_Image)[0].value && document.getElementsByName('Hover_Largeur_'+Id_Image)[0].value == document.getElementsByName('Largeur_'+Id_Image)[0].value)
	{
		document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value = 0;
		document.getElementsByName('Hover_Largeur_'+Id_Image)[0].value = 0;
		document.getElementsByName('Hover_X_'+Id_Image)[0].value = 0;
		document.getElementsByName('Hover_Y_'+Id_Image)[0].value = 0;
	}
}
 
function SwitchImagetoHover (Id_Image)
{
	if (document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value == 0)
	{
		document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value = document.getElementsByName('Hauteur_'+Id_Image)[0].value;
		document.getElementsByName('Hover_Largeur_'+Id_Image)[0].value = document.getElementsByName('Largeur_'+Id_Image)[0].value;
		document.getElementsByName('Hover_X_'+Id_Image)[0].value = document.getElementsByName('X_'+Id_Image)[0].value;
		document.getElementsByName('Hover_Y_'+Id_Image)[0].value = document.getElementsByName('Y_'+Id_Image)[0].value;
	}
 
	document.getElementById('img_'+Id_Image).style.height = document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.width = document.getElementsByName('Hover_Largeur_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.left = document.getElementsByName('Hover_Y_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.top = document.getElementsByName('Hover_X_'+Id_Image)[0].value + "px";
	document.getElementById('img_'+Id_Image).style.zIndex = 1;
	document.getElementById("tr_"+Id_Image).style.backgroundColor="grey";
 
}
 
 
function DoubleClickImage (Id_Image)
{
	if (survol!=0) //Deja une image en mode survol
	{
		SwitchImagetoNormal(survol); //L'image survolée repasse en mode normal
	}
 
	if (survol!=Id_Image) //Le double click n'a pas eu lieu sur l'image en mode survol actuelle
	{
		SwitchImagetoHover(Id_Image);
		survol=Id_Image;
	}
	else {
		survol=0;
	}
}

J'espere que je ne vous ai pas inond� d'informations inutiles, et que mon probl�me est � peu pres clair ... Bien entendu si vous avez des questions n'h�sitez pas !!

D'avance merci pour toute indication ...

**E.Bzz** · 18/11/2009, 10h46

Bonjour et bienvenue sur Developpez.com

3 remarques :

je ne comprends pas pourquoi tu utilises
Code : S�lectionner tout - Visualiser dans une fen�tre � part
```
document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value
```
et non pas getElementById() comme ailleurs : aucun des name n'est utilis� plusieurs fois (en d�finissant l'id bien s�r) ...
dans ton appel de fonction
Code : S�lectionner tout - Visualiser dans une fen�tre � part
```
ondblclick="DoubleClickImage(2)"
```
il faudrait passer en param�tre une chaine de caract�re et non une valeur num�rique.
et ... heu ... je lis mal ou dans ta fonction tu fais r�f�rence �
Code : S�lectionner tout - Visualiser dans une fen�tre � part
```
'img_'+Id_Image
```
alors que dans ton code HTML on trouve
Code : S�lectionner tout - Visualiser dans une fen�tre � part
```
<img id='Image_1'
```
(en tous cas je ne trouve pas de "img_" dans le HTML )

A+

**LorenzoIlMagnifico** · 18/11/2009, 13h53

Envoy� par E.Bzz

Bonjour et bienvenue sur Developpez.com

Bonjour, merci pour l'accueil, �� fait plaisir !! J'esp�re que je saurais rapidement trouver mes marques et aider autant que je serais aid� !!!

Alors pour r�pondre � tes questions :

je ne comprends pas pourquoi tu utilises

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementsByName('Hover_Hauteur_'+Id_Image)[0].value

et non pas getElementById() comme ailleurs : aucun des name n'est utilis� plusieurs fois (en d�finissant l'id bien s�r) ...

J'utilise les names plutot que les id dans les champs de mon formulaire pour pouvoir r�cuperer les couples names/valeurs dans ma page de traitement de php de mon formulaire. Ca peut marcher avec les id en lieu et place des names ??

dans ton appel de fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

ondblclick="DoubleClickImage(2)"

il faudrait passer en param�tre une chaine de caract�re et non une valeur num�rique.

Okay, j'ajoute les quotes dans mon php, resultat, (roulement de tambour), bah c'est pareil

et ... heu ... je lis mal ou dans ta fonction tu fais r�f�rence �

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

'img_'+Id_Image

alors que dans ton code HTML on trouve

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<img id='Image_1'

(en tous cas je ne trouve pas de "img_" dans le HTML

)

Heu oui l� c'est moi qui n'avait plus trop les yeux en face des trous hier soir. J'ai copi� le code HTML de la version n-1. La derni�re modification de la page concernait justement l'id des images qui �tait identique au name, je les ai donc modifi�es. Pour info le code HTML r�el de la page aujourd'hui avec les modifs propos�es (� l'exception des id pour le formulaire) :

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>La police des sentiments</title>
<head>
 
<link rel="stylesheet" type="text/css" href="pro_pullup_1/pro_pullup_1.css" />
<style type="text/css">
<!--
.global {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1100px;
}
 
-->
</style>
 
<body>
<script type="text/javascript" src="Include/wz_dragdrop.js"></script>
<div class="global" name="site_global">
 
<img src="Images/Chapeau-police-sentiments.jpg" width="1100" height="250" usemap="#Map" style="border:0;" />
<map name="Map" id="Map">
  <area shape="rect" coords="4,19,124,134" href="http://www.google.fr"/></map>
<img id='img_1' src="Images/extraits.jpg" name="Image_1" style="position:absolute; top:270px; left:245px; width:127px; height:130px; z-index:0"/>
<img id='img_2' src="Images/carton-wallet-police-sentiment.jpg" name="Image_2" style="position:absolute; top:270px; left:465px; width:300px; height:145px; z-index:0"/>
<img id='img_3' src="Images/couverture.jpg" name="Image_3" style="position:absolute; top:217px; left:960px; width:129px; height:190px; z-index:0"/>
<img id='img_4' src="Images/Presse.jpg" name="Image_4" style="position:absolute; top:425px; left:365px; width:101px; height:55px; z-index:0"/>
<img id='img_5' src="Images/l'yves-wallet-20-12-89.jpg" name="Image_5" style="position:absolute; top:425px; left:710px; width:215px; height:215px; z-index:0"/>
<img id='img_8' src="Images/legende-son.jpg" name="Image_8" style="position:absolute; top:650px; left:140px; width:401px; height:19px; z-index:0"/>
<img src="Images/Corps-site.jpg" width="1100" height="450" style="border:0;" />
<a href="http://www.google.fr"><img src="Images/zonecontact.jpg" width="100" height="90" style="border:0; position:absolute; top:610px; left:0px" /></a>
 
<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="815" height="20" style="position:absolute; top:675px; left:140px">
	<param name="movie" value="player_mp3_maxi.swf" />
	<param name="FlashVars" value="mp3=Documents/numerozero.mp3&amp;autoplay=0&amp;showstop=1&amp;width=815" />
 
</object>
<form name='formulaire' method='post' action='saveImages.php?NomPage=LaPoliceDesSentiments'>
<input type='hidden' name='Id_Page' value='1'/>
<table border="solid 1px black" valign="middle">
<tr valign="middle"><td align="center">Image</td>
<td>Largeur</td>
<td>Hauteur</td>
<td>X</td>
<td>Y</td>
<td>Hover_Largeur</td>
<td>Hover_Hauteur</td>
 
<td>Hover_X</td>
<td>Hover_Y</td>
</tr><tr id='tr_1' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_2' value='1'/><td><img src="Images/extraits.jpg" width="80" height="81" ondblclick="DoubleClickImage('1')"/></td>
<td><input type='text' name='Largeur_1' value='127'/></td><td><input type='text' name='Hauteur_1' value='130'/></td><td><input type='text' name='X_1' value='245'/></td><td><input type='text' name='Y_1' value='270'/></td><td><input type='text' name='Hover_Largeur_1' value='0'/></td><td><input type='text' name='Hover_Hauteur_1' value='0'/></td><td><input type='text' name='Hover_X_1' value='0'/></td><td><input type='text' name='Hover_Y_1' value='0'/></td></tr>
<tr id='tr_2' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_3' value='2'/><td><img src="Images/carton-wallet-police-sentiment.jpg" width="80" height="38" ondblclick="DoubleClickImage('2')"/></td>
<td><input type='text' name='Largeur_2' value='300'/></td><td><input type='text' name='Hauteur_2' value='145'/></td><td><input type='text' name='X_2' value='465'/></td><td><input type='text' name='Y_2' value='270'/></td><td><input type='text' name='Hover_Largeur_2' value='575'/></td><td><input type='text' name='Hover_Hauteur_2' value='275'/></td><td><input type='text' name='Hover_X_2' value='375'/></td><td><input type='text' name='Hover_Y_2' value='220'/></td></tr>
<tr id='tr_3' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_4' value='3'/><td><img src="Images/couverture.jpg" width="80" height="117" ondblclick="DoubleClickImage('3')"/></td>
<td><input type='text' name='Largeur_3' value='129'/></td><td><input type='text' name='Hauteur_3' value='190'/></td><td><input type='text' name='X_3' value='960'/></td><td><input type='text' name='Y_3' value='217'/></td><td><input type='text' name='Hover_Largeur_3' value='0'/></td><td><input type='text' name='Hover_Hauteur_3' value='0'/></td><td><input type='text' name='Hover_X_3' value='0'/></td><td><input type='text' name='Hover_Y_3' value='0'/></td></tr>
<tr id='tr_4' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_5' value='4'/><td><img src="Images/Presse.jpg" width="80" height="43" ondblclick="DoubleClickImage('4')"/></td>
<td><input type='text' name='Largeur_4' value='101'/></td><td><input type='text' name='Hauteur_4' value='55'/></td><td><input type='text' name='X_4' value='365'/></td><td><input type='text' name='Y_4' value='425'/></td><td><input type='text' name='Hover_Largeur_4' value='0'/></td><td><input type='text' name='Hover_Hauteur_4' value='0'/></td><td><input type='text' name='Hover_X_4' value='0'/></td><td><input type='text' name='Hover_Y_4' value='0'/></td></tr>
<tr id='tr_5' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_6' value='5'/><td><img src="Images/l'yves-wallet-20-12-89.jpg" width="80" height="80" ondblclick="DoubleClickImage('5')"/></td>
<td><input type='text' name='Largeur_5' value='215'/></td><td><input type='text' name='Hauteur_5' value='215'/></td><td><input type='text' name='X_5' value='710'/></td><td><input type='text' name='Y_5' value='425'/></td><td><input type='text' name='Hover_Largeur_5' value='445'/></td><td><input type='text' name='Hover_Hauteur_5' value='445'/></td><td><input type='text' name='Hover_X_5' value='480'/></td><td><input type='text' name='Hover_Y_5' value='190'/></td></tr>
<tr id='tr_8' style:'backgroundColor='white''><input type='hidden' name='Id_Vignette_7' value='8'/><td><img src="Images/legende-son.jpg" width="80" height="3" ondblclick="DoubleClickImage('8')"/></td>
<td><input type='text' name='Largeur_8' value='401'/></td><td><input type='text' name='Hauteur_8' value='19'/></td><td><input type='text' name='X_8' value='140'/></td><td><input type='text' name='Y_8' value='650'/></td><td><input type='text' name='Hover_Largeur_8' value='0'/></td><td><input type='text' name='Hover_Hauteur_8' value='0'/></td><td><input type='text' name='Hover_X_8' value='0'/></td><td><input type='text' name='Hover_Y_8' value='0'/></td></tr>
</table></form>
 
<div class="global">
	<ul id="nav">
	<li class="top"><a href="#" id="page" class="top_link"><span class="down">Page</span></a>
		<ul class="sub">
			<li class="fly"><a href="newPage.php" class="fly">Nouvelle Page</a></li>
			<li class="fly"><a href="#" class="fly">Supprimer la page</a></li>
			<li class="fly"><a href="editPage.php?NomPage=LaPoliceDesSentiments" class="fly">Modifier la page</a></li>
 
			<li class="fly"><a href="#" class="fly">Chercher une page</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="vignettes" class="top_link"><span class="down">Vignettes</span></a>
		<ul class="sub">
			<li class="fly"><a href="addImage.php?NomPage=LaPoliceDesSentiments" class="fly">Ajouter une image</a></li>
			<li class="fly"><a href="editImage.php?NomPage=LaPoliceDesSentiments" class="fly">Editer les images</a></li>
 
			<li class="fly"><a href="#" class="fly">Zoom</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="liens" class="top_link"><span class="down">Liens</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>
 
	</li>
	<li class="top"><a href="#" id="sons" class="top_link"><span class="down">Sons</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="zones" class="top_link"><span class="down">Zones</span></a>
 
		<ul class="sub">
						<li class="fly"><a href="#" class="fly">Edit</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" id="sauvegarde" class="top_link"><span class="down">Sauvegarde</span></a>
		<ul class="sub">
			<li class="fly"><a href="#" onClick="document.forms['formulaire'].submit();" class="fly">Sauvegarder</a></li>
 
			<li class="fly"><a href="javascript:location.reload(true)" class="fly">Annuler</a></li>
		</ul>
	</li>
</ul>
</div></div>
<script type="text/javascript" src="Javascript/survol.js"></script>
<script type="text/javascript">
<!--
 
SET_DHTML(CURSOR_MOVE,SCALABLE,RESET_Z, "Image_1", "Image_2", "Image_3", "Image_4", "Image_5", "Image_8");
 
 
function my_DropFunc()
{
	var arraytokens = dd.obj.name.split('_');
	var Id_Vignette = arraytokens[1];
	document.getElementsByName(survolstring(Id_Vignette)+"Hauteur_"+Id_Vignette)[0].value = dd.obj.h;
	document.getElementsByName(survolstring(Id_Vignette)+"Largeur_"+Id_Vignette)[0].value = dd.obj.w;
	if (dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft <0 ) {
		dd.obj.moveTo(document.getElementsByName("site_global")[0].offsetLeft,dd.obj.y);
		document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = 0;
	}
	else {
		if (dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft > 1100 - dd.obj.w) {
			dd.obj.moveTo(document.getElementsByName("site_global")[0].offsetLeft + 1100 - dd.obj.w,dd.obj.y);
			document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = 1100 - dd.obj.w;
		}
		else {
			document.getElementsByName(survolstring(Id_Vignette)+"X_"+Id_Vignette)[0].value = dd.obj.x - document.getElementsByName("site_global")[0].offsetLeft;
		}
	}
	document.getElementsByName(survolstring(Id_Vignette)+"Y_"+Id_Vignette)[0].value = dd.obj.y;
}
//-->
</script>
</body>
</html>

Les images ne sont toujours pas modifi�es par contre, quand je clique sur une image qui vient de passer en mode survol, elle se d�place sur la page, pas � l'endroit o� elle devrait, mais elle se d�place. Par contre elle ne change pas de taille ...

Pour info, si vous voulez voir la page : http://lau.cochet.free.fr/Edit.php?N...eDesSentiments

**E.Bzz** · 18/11/2009, 14h11

Envoy� par LorenzoIlMagnifico

J'utilise les names plutot que les id dans les champs de mon formulaire pour pouvoir r�cuperer les couples names/valeurs dans ma page de traitement de php de mon formulaire. Ca peut marcher avec les id en lieu et place des names ??

Que les name soient d�finis pour le fonctionnement du <form> est une chose (n�cessaire effectivement). Par contre, pour les acc�s JavaScript, il est recommand� (car plus simple, efficace etc.) d'utiliser les id ...
De plus, seuls les �l�ments de formulaire sont cens�s avoir un name.
Acc�der aux �l�ments de la page via leur id �vite aussi de se poser cette question (et d'avoir � attribuer des name � des �l�ments qui ne devraient pas en avoir).

Envoy� par LorenzoIlMagnifico

Okay, j'ajoute les quotes dans mon php, resultat, (roulement de tambour), bah c'est pareil

Non, c'est mieux : tu passes bien � la fonction un param�tre du type qu'elle attend

Envoy� par LorenzoIlMagnifico

lLes images ne sont toujours pas modifi�es par contre, quand je clique sur une image qui vient de passer en mode survol, elle se d�place sur la page, pas � l'endroit o� elle devrait, mais elle se d�place. Par contre elle ne change pas de taille ...

As-tu essay� de faire un alert() (dans la fonction) des valeurs qui ne sont pas ou mal prises en compte ?
Elles ne correspondent peut �tre pas � ce que tu attends ....

Envoy� par LorenzoIlMagnifico

Pour info, si vous voulez voir la page : http://lau.cochet.free.fr/Edit.php?N...eDesSentiments

J'ai vu, mais je t'avouerais que �a ne m'a pas aid� � comprendre le fonctionnement attendu

(par contre, je suis bien arriv� � faire "bouger" les images, mais je sais pas trop comment ... un double clic sur une image du tableau + un clic sur une autre image

)

A+

**LorenzoIlMagnifico** · 18/11/2009, 14h25

Envoy� par E.Bzz

Que les name soient d�finis pour le fonctionnement du <form> est une chose (n�cessaire effectivement). Par contre, pour les acc�s JavaScript, il est recommand� (car plus simple, efficace etc.) d'utiliser les id ...
De plus, seuls les �l�ments de formulaire sont cens�s avoir un name.
Acc�der aux �l�ments de la page via leur id �vite aussi de se poser cette question (et d'avoir � attribuer des name � des �l�ments qui ne devraient pas en avoir).

Pas de soucis, j'ai besoin des names pour les images centrales pour le drag/drop, et pour les champs des formulaires.

Pour ton info, les images du site devrait �tre d�placables simplement par glisser/deposer et resizable en maintenant la touche shift enfonc�e lors d'un glisser/d�poser, d'ailleurs les champs du formulaire sont bien mis � jour lors de ces deux op�rations.

Envoy� par E.Bzz

Non, c'est mieux : tu passes bien � la fonction un param�tre du type qu'elle attend

Oui pas b�te !

Mais bon je croyais que Js �tait � l'aise avec le surtypage ...

Envoy� par E.Bzz

As-tu essay� de faire un alert() (dans la fonction) des valeurs qui ne sont pas ou mal prises en compte ?
Elles ne correspondent peut �tre pas � ce que tu attends ....

Plutot qu'un alert, j'ai utilis� le javascript debugger de Firefox pour v�rifier pas � pas le fonctionnement et dans la fonction switchImagetoHover les formules de droite, ont bien la valeur attendue (celles des champs Hover_ du formulaire)

Envoy� par E.Bzz

J'ai vu, mais je t'avouerais que �a ne m'a pas aid� � comprendre le fonctionnement attendu

(par contre, je suis bien arriv� � faire "bouger" les images, mais je sais pas trop comment ... un double clic sur une image du tableau + un clic sur une autre image

)

Bon comme je disais, les images centrales sont d�placables/resizables et une op�ration de la sorte met � jour les champs du formulaire correspondant. Le truc c'est qu'en double-cliquant sur la miniature, l'image centrale devrait prendre la position et la taille des champs Hover_. Par ailleurs si une image est en mode survol (et sa ligne de tableau en gris) le d�placement/resize modifie bien les champs Hover_ au lieu des originaux !

Enfin pour revenir aux id/name dans le formulaire, je comprends ton conseil, mais le formulaire est utilis� pour deux choses : accueillir les nouvelles valeurs en cas d'action, et fournir les valeurs pour l'affichage. La mise � jour des champs fonctionne, il suffit de bouger une image pour s'en rendre compte. Et l'ac�s aux valeurs aussi, l'interpreteur du debugger me le confirme.

**LorenzoIlMagnifico** · 18/11/2009, 16h05

H� h�, �� yest le probl�me est r�solu !!!

En fait je souffrais d'un grave conflit entre mon code et la librairie de drag/drop !!

En fouillant un peu j'ai trouv� des m�thodes dans la librairie en question permettant de modifier mes images, je les ai utilis�es et � miracle tout fonctionne !

Merci beaucoup pour le coup de main, le soutien fait toujours du bien au moral.

Je profite pour remercier Walter Zorn pour sa librarie. J'utilisais � l'origine scriptaculous pour le drag/drop des images mais il n'offre malheureusement pas le resize contrairement � celle-ci. La librairie comporte tout ce dont on peut rever pour faire joujou avec les images ou des divs.

Si �� vous interesse : http://www.walterzorn.com/dragdrop/dragdrop_e.htm

**E.Bzz** · 18/11/2009, 16h10

Bravo

Envoy� par LorenzoIlMagnifico

Je profite pour remercier Walter Zorn pour sa librarie. J'utilisais � l'origine scriptaculous pour le drag/drop des images mais il n'offre malheureusement pas le resize contrairement � celle-ci. La librairie comporte tout ce dont on peut rever pour faire joujou avec les images ou des divs.

Si �� vous interesse : http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Bonnes librairies effectivement !
J'utilise la partie graphe qui est aussi tr�s utile ...

A+

Modification hauteur et largeur d'une image suite � un double-click sur une autre image

JavaScript

Discussions similaires

Partager

Partager