Web] 마우스 온/오버 시, 투명도 바꾸기

Web] 마우스 온/오버 시, 투명도 바꾸기

텀 프로젝트 중에, 시각적인 효과를 고려하던 중, 투명도를 조정하여,

아래처럼 마우스 포인터가 올려졌을 때 흐려졌다가,

마우스 포인터가 해당 위치에서 떠나면 다시 원래대로 돌아오는 효과를 적용했다.

실제로 호스팅을 받는 사이트가 아닌지라,

제품 사진은 다른 사이트에서 봤을 수도 있을 것..

아무튼 각색하고, 이 기능은 아주 간단하게 구현이 가능하다.

나는 저 프레임을 <div>태그로 구성했는데, 소스는 다음과 같다

function changeOpacity1(obj)
{
    obj.style.opacity="0.5";
}
function changeOpacity2(obj)
{
    obj.style.opacity="1";
}

<div class='best_goods' onmouseout='changeOpacity2(this)' onmouseover='changeOpacity1(this)' onclick="location.href='./goods_detail.php?code=$code'">
    <img src='$savedir/$userfile' width='250' height='250'/><br>
    <div style='padding:5px; color:#666666; min-height:30px; text-align:center; font-size:10pt; center; margin-top:13px'>$name</font></div>
    <div style='padding-bottom:5px; padding-top:5px; margin-bottom:15px; text-align:center;'>
        <b style='color:#ff0000; font-size:10pt; font-weight:red;'>$price 원</b>
    </div>
</div>

정식으로 어딘가에 내놓을 사이트가 아니라서

스타일을 별도로 주거나 그렇지 않은 경우가 섞여 있다.

앞으로도 올라오는 코드들도 이와 다르지 않을 것이지만.. 양해하길 바란다.

여기서 핵심적으로 봐야하는 부분은 onmouseout과 onmouseover이다.

이들이 동작할 때마다 함수들이 동작한다.

opacity는 1이 기본값이며 값이 작아질 수록 흐려진다.

뭐든 너무 과하면 보기 그러니까 적절히 주는 것이 좋을 것 같다.

지금 와서 보면, 굳이 자바스크립트가 아니라 CSS만으로도 해결할 수 있을 것 같다.