소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#txt1, #btn1 {
background-color:black;
color:white;
font-weight:bold;
}
#search {
/*background-image:url(images/sp_fms.gif);*/
/*background-repeat:no-repeat;*/
/*가로는 가운데 세로는 현재위치(0)*/
/*background-position:center -18px;*/
/*background-position:center -40px;*/
/*background-position:center -60px;*/
/*이미지를 하나씩 보관 하는것 보다 통체로 여러 이미지를 섞어 놓고 좌표를 조절하는것이 속도도 빠르고 관리도 좋다.
브라우저에서 통째 이미지를 받아오고 다시 서버에 거치는 작업이 없기 때문에 더빠르다
*/
/* 속성 그룹화 */
background:url(images/sp_fms.gif) no-repeat center -60px white;
}
</style>
<script type="text/javascript">
function HideBackground(obj) {
obj.style.backgroundImage = "url()";
}
</script>
</head>
<body>
<!-- Ex14_background.htm -->
<form>
<input type="text" id="txt1" />
<input type="button" value="검색" id="btn1" />
<br /><br />
<input type="text" id="search" size="50" onfocus="HideBackground(this);" />
<!-- 텍스트를 입력받을상태 = focus -->
</form>
</body>
</html>
결과
마우스를 올리게 되면 백그라운드 이미지가 사라진다.
