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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager