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

Programming

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

touchsoul 2009. 10. 5. 21:12

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

지금부터 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>

결과화면