웹마스터 팁

  2. Support
  3. 웹마스터 팁

입력폼에 배경그림 넣기

2008.12.23 02:41

정낙훈(xynex)

<SCRIPT language=javascript>
var c=false;
function ch (valueid) {
if(valueid == 'user_id') document.zb_login.user_id.style.backgroundImage="";
else document.zb_login.password.style.backgroundImage="";
c=true;
}
function chout (valueid) {
if(valueid == 'user_id') {
if(!document.zb_login.user_id.value) document.zb_login.user_id.style.backgroundImage="url(./image/bg_inform_id.png)";
}
else {
if(!document.zb_login.password.value) document.zb_login.password.style.backgroundImage="url(./image/bg_inform_password.png)";
}
c=true;
}
</SCRIPT> 

위 자바스크립트를 링크를 걸지 마시고 직접 해당하는 파일에 삽입해주세요.
아래는 html 소스입니다.

<form action="./" method="post" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget" name="zb_login">

<input type="text" name="user_id" onmousedown="return ch('user_id');" onkeydown="return ch('user_id');" style="background: url(./image/bg_inform_id.png) no-repeat;" onfocusout="return chout('user_id')" maxLength=20>
<input type="password" name="password" onmousedown="return ch('password');" onkeydown="return ch('password');" style="background: url(./image/bg_inform_password.png)) no-repeat;" onfocusout="return chout('password')" maxLength=20>

녹색은 파일경로이며, 붉은색은 폼네임입니다. 꼭 자바스크립트와 동일하게 맞춰주세요.
파란색은 아이디와 패스워드의 네임입니다. 이것도 꼭 지켜주시고요.
인풋에 스타일은 class로 하면 안되더군요. 꼭 위와 같이 직접 스타일로 적어주세요.
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기