[CSS] Javascript 없이 CSS로 Click(누른상태) 할 때 Image 변경하기

날짜:





이전부터 홈페이지들을 보면 마우스를 이미지위에 올리거나 누르게되면
이미지를 교체하는 기능이 이제는 기본이 되었다.


그중에 사용하는 방법중에 Javascript 로 다음과 같은 소스를 많이 볼 수 있었다.
(드림위버에서 자동 생성되는 코드라고 하는데 초보 개발자들이 많이들
  copy&paste 사용하곤한다.)

function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
    var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
        if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}





스크립트로 처리하는 방법은 여러가지가 있겠지만
최근 스크립트를 안쓰고 하려다보니 다음과 같은 방법을 생각해냈다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
        }
        /*기본 상태*/
        #btn1 {
            width: 50px;
            height: 50px;
            background-image: url('./images/normal.png');
        }
        /*마우스오버 했을 때 상태*/
        #btn1:hover {
            background-image: url('./images/hover.png');
        }
        /*마우스 눌렀을 때 상태*/
        #btn1:active {
            background-image: url('./images/active.png');
        }
    </style>
</head>
<body>

<div id="btn1"></div>

</body>
</html>






일반적으로 링크에서 많이 사용하는 pseudo class 클래스(링크)가 떠올랐다.
혹시 링크가 아닌 일반 Element 에도 적용이 될까 싶어서 해봤는데 잘 된다!!

보통은 아래와 같이 사용을 하지만 말이다..ㅎ

a:link {
    color: #FF0000;
}
/* visited link */
a:visited {
    color: #00FF00;
}
/* mouse over link */
a:hover {
    color: #FF00FF;
}
/* selected link */
a:active {
    color: #0000FF;
}



하지만 Android 2.x 에서는 정상적으로 동작하지 않아서 결국 걷어내고
스크립트로 처리를 하고 말았다. ㅠ






댓글

댓글 쓰기