이전부터 홈페이지들을 보면 마우스를 이미지위에 올리거나 누르게되면
이미지를 교체하는 기능이 이제는 기본이 되었다.
그중에 사용하는 방법중에 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 에서는 정상적으로 동작하지 않아서 결국 걷어내고
스크립트로 처리를 하고 말았다. ㅠ
댓글
댓글 쓰기