jQuery를 써서 네이버 로그인처럼 해보자.

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

아이디와 비밀번호를 입력이 되지 않았을 때 저런 모양이 됩니다.

지금부터 jQuery를 사용해서 같은 효과를 내보도록 하겠습니다.

<HTML>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
        <TITLE></TITLE>
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <style type="text/css">
            * { font-size:12px; font-family:돋움; }
            .txt { width:110 }
        </style>
        <script type="text/javascript">
            $("input").attr(
                {title: '값을 입력하세요.' }
            );
        
            $("#name").css("background-image",'url("images/id.JPG")');
            $("#passwd").css("background-image",'url("images/pwd.JPG")');
 
            $("#name").focus(function() {
                this.style.backgroundImage='url("none")';
            });
            $("#passwd").focus(function() {
                this.style.backgroundImage='url("none")';
            });
            $("#name").blur(function() {
                if(this.id=="name"&&this.value=="")this.style.backgroundImage='url("images/id.JPG")';
            });
            $("#passwd").blur(function() {
                if(this.id=="passwd"&&this.value=="")this.style.backgroundImage='url("images/pwd.JPG")';
            });
        </script>
    </HEAD>
    <BODY>
        <form id="form1" method="post" action="./result.html">
        <table>
            <tr>
                <td>이름</td>
                <td><input type="text" class="txt" id="name"></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" class="txt" id="passwd"></td>
            </tr>
            <tr>
                <td>E-mail</td>
                <td><input type="text" id="email"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="확인"></td>
            </tr>
        </table>
        </form>
    </BODY>
</HTML>

결과화면

'Programming' 카테고리의 다른 글

Modal 예제 (0)	2010.05.22
EJB START(Enterprise Java Beans) (0)	2009.12.11
Virtual Box 심리스 모드를 알아보자. (0)	2009.10.26
eclipse에서 flex하기(eclipse에 flex plug-in을 깔자) (0)	2009.10.11
공부를 해야겠군요... (2)	2009.10.05
Ubuntu에서 root 암호 설정 하는 법 (0)	2009.10.04
Unix 명령어 ls - 목록 출력 (0)	2009.09.24
Unix 압축 시 기존 파일 살리기 (0)	2009.09.24
jQuery 기본 (0)	2009.09.23
VirtualBox에서 우분투(Ubuntu) 창크기 변경하기 (0)	2009.09.13

jQuery를 써서 네이버 로그인처럼 해보자.

'Programming' 카테고리의 다른 글

티스토리툴바