Modification hauteur et largeur d'une image suite à un double-click sur une autre image
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:
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&autoplay=0&showstop=1&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:
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 ...
