如何使用表单结合javascript改变网页图片的大小？

<!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>images对象</title><script language="javascript1.2">
{
   function image()
   {
      document.images[0].border = document.form1.border.value ;
  document.images[0].width = document.form1.width.value ;
  document.images[0].height = document.form1.height.value ;
//  document.write(document.images[0].border+"  "+document.images[0].width+"  "+document.images[0].height);
   }
}
</script></head><body><p><img src="2.jpg" alt="image图片" width="" height="" border="" name="myimg" /></p>
<form name="form1">
<p>
边框值<input type="text" name="border" size="5" />
宽度<input type="text" name="width" size="5" />
高度<input type="text" name="height" size="5" />
<input type="submit" value="提交" onclick="image()" />
<input type="reset" value="重置" />
</p>
</form></body>
</html>测试结果是：一旦按了提交按钮，图片闪一下，接着就变回原来的大小了，这个为什么会这样的？

解决方案 »

  1.   

    点击按钮后执行：
    document.getElementById('图片id').style.width = 宽度值
    document.getElementById('图片id').style.width = 高度值
      

  2.   

    http://q.cnblogs.com/q/41004/
    但为什么页面会自动刷新的？这个真的不懂，真心请教...
      

  3.   


    因为你是在表单中，
    <input type="submit" value="提交" onclick="image()" />
    这个input的type又是submit。所以，执行完你预定的代码之后，表单被提交如果想保持表单功能：
    <input type="submit" value="提交" onclick="return image()" />
    然后
    function image(){  //尾部加上
    return false;//可以使表单不被提交
    }
    当然，假如你按以上方法做了。那就表明你这个表单是不需要提交的。那么，你需要做的就是：
    变理input的类型即可，其他地方不需要做任何改动：
    <input type="button" value="提交" onclick="image()" />
      

  4.   

    document.images[0].style.width= document.form1.width.value + "px" ;