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
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
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>
Vous pouvez tester ce code:
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); } }
Partager