js 事件点击 显示 隐藏

 1       <div style="position:absolute;left:40%;top:10%;border-style:dotted">

 2           <img src="zgl.jpg"/><br/>

 3           <center>

 4               <input type="button" value="隐藏"/>

 5                   &nbsp;&nbsp;&nbsp;&nbsp;

 6               <input type="button" value="显示"/>

 7           </center>

 8       </div>

 9       <script type="text/javascript">

10           document.getElementsByTagName("input")[0].onclick=function(){

11               //将图像隐藏

12               var imgElement = document.images[0];

13               imgElement.style.visibility="hidden";

14           }

15           document.getElementsByTagName("input")[1].onclick=function(){

16               //将图像显示

17               var imgElement = document.images[0];

18               imgElement.style.visibility="visible";

19           }

20           document.getElementsByTagName("div")[0].onmouseover=function(){

21               //将图片放大

22               var imgElement = document.images[0];

23               //获取原来图片的大小

24               x = imgElement.width;

25               y = imgElement.height;

26               imgElement.width=imgElement.width*1.5;

27               imgElement.height=imgElement.height*1.5;

28           }

29           document.getElementsByTagName("div")[0].onmouseout=function(){

30               //将图片还原

31               var imgElement = document.images[0];

32               imgElement.width=x;

33               imgElement.height=y;

34           }

35           //全局变量

36           var x;

37           var y;

38       </script>

js 事件点击 显示 隐藏