웹디자인 노트/웹관련 튜토리얼

폼 영역에 마우스 클릭했을 때.. 이미지 변경하는 간단한 코드

서관덕의 시간이 머문 작은공간™ 2007. 2. 9. 19:20
어떠한 사이트등을 보면 아이디나 패스워드 입력하는 폼 영역에 아이디 와 패스워드 글자가 적혀 있고..
마우스를 클릭하면.. 없어지는 것들을 많이 보셨을 것입니다.^^

이런 형태를 만들기 위해서 아래와 같은 방법으로 사용하시면 쉽습니다.^^


<input name="textfield" type="text" class="form_02" style="height:17px; width:150px;" onfocus="this.style.background='#ffffff'" onblur="this.style.background='#ffffff'"/>


기존에 CSS 에 아이디나 패스워드 같은 그림을 백그라이운드로 미리 정해두시고..
적용한 형태입니다.

코드중..
onfocus 부분과 onblur 부분에 색상만 변경해 사용하시면 됩니다.

코드는 그대로 복사 붙여넣기 해서 사용하세요..^^


그리고는 알아서.. 잘 될때까지.. 맨땅에 헤딩하세요..^^