Java World

Java Korean

자바스크립트 마우스 오버

Posted on by Posted in Javascript

자바스크립트 onmouseover() / onmouseout() 함수를 이용해서

마우스 오버 효과를 줘볼까요??

일단 코드를 보면 심플 하죠잉~~~

<!DOCTYPE html>
    <html>
      <head>
        <script>

          function changeImg() 
          {
           var element = document.getElementById('smile');
           element.style.opacity = "0";
           element.style.filter  = 'alpha(opacity=0)';
          }

          function normalImg() 
          {
          var element = document.getElementById('smile');
          element.style.opacity = "1";
          element.style.filter  = 'alpha(opacity=100)';
          }
        </script>
      </head>
      <body>
<div onmouseover="changeImg()" onmouseout="normalImg()" class="box"style="width:200px; height:100px; background-color:red;"></div>
<img src="https://www.google.co.kr/images/srpr/logo11w.png" alt="Smiley"  id="smile">
</body>
</html>

빨간 네모에 마우스를 올리면 구글형님이 사라지고

마우스를 치우면 다시 구글형님이 나오고…

 

비슷한 효과로 css에 hover 효과가 있지만 onmouseover() / onmouseout()  는 자바스크립트 함수를 제어 할수 있다는점

유용하게 활용해보세요 .. ㅎㅎ



Smiley

Leave a comment