js 事件點擊 顯示 隱藏

 

      <div style="position:absolute;left:40%;top:10%;border-style:dotted">
          <img src="zgl.jpg"/><br/>
          <center>
              <input type="button" value="隱藏"/>
                  &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="button" value="顯示"/>
          </center>
      </div>
      <script type="text/javascript">
          document.getElementsByTagName("input")[0].onclick=function(){
              //將圖像隱藏
              var imgElement = document.images[0];
              imgElement.style.visibility="hidden";
          }
          document.getElementsByTagName("input")[1].onclick=function(){
              //將圖像顯示
              var imgElement = document.images[0];
              imgElement.style.visibility="visible";
          }
          document.getElementsByTagName("div")[0].onmouseover=function(){
              //將圖片放大
              var imgElement = document.images[0];
              //獲取原來圖片的大小
              x = imgElement.width;
              y = imgElement.height;
              imgElement.width=imgElement.width*1.5;
              imgElement.height=imgElement.height*1.5;
          }
          document.getElementsByTagName("div")[0].onmouseout=function(){
              //將圖片還原
              var imgElement = document.images[0];
              imgElement.width=x;
              imgElement.height=y;
          }
          //全局變量
          var x;
          var y;
      </script>