bonjour,
j'ai sur mon site un formulaire permettant le redimensionnement d'image, avec un aperçu en direct.
Seulement se formulaire ne fonctionne que si les balises <form></form> sont absentes. En effet, lorseque j'ajoute ces balises, les fonctions appellées par un onKeyup ne fonctionnent pas...
voici le code xhtml
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
<form action="adminimage.php" method="post">
<fieldset class="action_image">
<legend>redimensionner une image</legend>
 
indiquez les nouvelles dimensions de l'image, en pixels:<br />
<input type="text" size="4"value="400" id="x" onKeyUp="javascript:x()" />
x<input type="text" size="4" name="pixel_y" value="150" id="y" onKeyUp="javascript:y()" />
pixels<br />
ou en pourcentages:<br />
<input type="button" value="-" onclick="javascript:pourcent_x_bouton(-5)" />
<input type="text" size="3" value="100" name="pourcent_x" id="pourcent_x" onKeyUp="javascript:pourcent_x(1)" />
<input type="button" value="+" onclick="javascript:pourcent_x_bouton(5)" />%x
<input type="button" value="-" onclick="javascript:pourcent_y_bouton(-5)" />
<input type="text" size="3" value="100" name="pourcent_y" id="pourcent_y" onKeyUp="javascript:pourcent_y()" />
<input type="button" value="+" onclick="javascript:pourcent_y_bouton(5)" />%
<br />
<label>conserver les proportions: <input type="checkbox" checked="checked" onclick="javascript:proportion()" />
</label><br />
 
<input type="submit" name="redimension" value="redimensionner" /><br />
<img src="css/image/ban.gif" alt="blind-cana.gif" height="150" width="400" id="image" />
</fieldset>
</form>
et voici une des fonctions appelées par onKeyup
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
function x()
{
   var x = document.getElementById("x").value;
   var x = Math.abs(parseInt(x));
   document.getElementById("x").value = x;
   //calcul du pourcent
   var pourcent = Math.round(x/(largeur_ini/100));
   document.getElementById("pourcent_x").value = pourcent;
   //affectation de x a l'image
   valeur_x = x+"";
   document.getElementById("image").setAttribute("width", valeur_x);
 
   if (conserver_proportions)
   {
        document.getElementById("pourcent_y").value = pourcent;
        var y = Math.round(hauteur_ini/100*pourcent);
        document.getElementById("y").value = y;
        valeur_y = y+"";
        document.getElementById("image").setAttribute("height", valeur_y);
   }
}
Vous pouvez tester ce code: