andipod.com 에 단순히 블로그만 검색하는 검색창을 달았습니다.
단순하게 아무것도 없는 검색창인데 로고를 좀 넣었습니다.
(너무 그림이 왼쪽으로 붙었는데 조금 더 오른쪽으로 움직여 봐야겠습니다)
마우스를 클릭하면 이미지가 사라지고, 다시 다른 곳을 선택하면 이미지가 나타나는 코드입니다.
<script language="javaScript">
function OutputBackImg(input_name){
input_name.style.backgroundColor = "#FFFFF7";
input_name.style.backgroundImage = "";
}
function InputBackImg(input_name,img_name){
if(input_name.value == ""){
input_name.style.backgroundImage = "url(" + img_name + ")";
}
}
</script>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input /
onblur="javaScript:InputBackImg(this,'이미지 주소');"
style="BACKGROUND-IMAGE:
url(이미지 주소); BACKGROUND-REPEAT: no-repeat"
name="q"
id="search-box"
type="text"
onfocus="javaScript:OutputBackImg(this);" size="15"/>
<input id="search-btn" value="검색" type="submit"/> </form>
'이미지 주소' 라고 쓰여 있는 곳에 이미지가 있는 주소를 넣어주시면 됩니다.
앞쪽에 주소에는 ['] 작은 따음표를 붙이시고, 뒤쪽에는 따옴표 같은 거 없이 주소만 넣으시면 됩니다.