|
오늘은 스타일시트의 백그라운드 속성을 효과적으로 응용한 한가지 사례를 배워보겠습니다.
검색엔진 엠파스에 보시면 검색창에 간혹 백그라운드가 깔려 있는 모습을 본적 있을 겁니다.
키워드를 입력시키려고 하면 백그라운드 이미지가 사라지는...
우선 소스를 살펴보겠습니다.
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title></title>
<script language="javascript">
function changeIMG(){
document.search.test.style.backgroundImage="";
}
</script>
</head>
<body>
<form name="search">
<input name="test" style="background-image:url(백그라운드이미지경로);background-repeat:no-repeat;background-position:center;" onclick="return changeIMG();">
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
위의 소스처럼 기본적으로 자바스크립트는 <head></head>태그의 사이에 추가해주시면 됩니다.
그외 주의할 점은 <body>태그 사이에 반드시 폼태그가 추가되어야 하구요... 그 폼태그 사이에 텍스트박스가
추가되어야만 제대로 작동하게 됩니다.
또하나, 보시면 다른색상으로 표시한 녀석들은 스크립트부분과 본문부분이 꼭 일치해야만 합니다.
오타등으로 일치하지 않을시에는 오류로 작동하지 않을 수 있습니다.
그럼 사례별로 적용예제를 보겠습니다.
#1. 엠파스와 동일한 효과(초기-백그라운드 적용, 클릭시-백그라운드 사라짐)
(소스)
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title></title>
<script language="javascript">
function changeIMG(){
document.search.test.style.backgroundImage="";
}
</script>
</head>
<body>
<form name="search">
<input name="test" style="background-image:url(http://10mm.net/img/bg1.gif);background-repeat:no-repeat;background-position:center;" onclick="return changeIMG();">
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
[결과보기]
#2. 백그라운드 체인지 효과(초기-백그라운드 적용, 클릭시-다른 백그라운드로 변경)
(소스)
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title></title>
<script language="javascript">
function changeIMG(){
document.search.test.style.backgroundImage="url(http://10mm.net/img/bg2.gif)";
}
</script>
</head>
<body>
<form name="search">
<input name="test" style="background-image:url(http://10mm.net/img/bg1.gif);background-repeat:no-repeat;background-position:center;" onclick="return changeIMG();">
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
| 
