♡♥ MyBabyDiary 마이베이비다이어리♥♡
home site contact webmail
마이베이비다이어리
자유게시판
궁금한거 물어보기
컴퓨터관련정보
성원게시판
정현게시판
다이어리
루어낚시정보
루어낚시포인트
HOME > 게시판 > 컴퓨터관련정보
     

제목: input에 이미지 박스 롤링
분류: 일반
이름: 성원이(主人)


등록일: 2010-08-12 16:58
조회수: 7781
 
input에 이미지 박스 롤링

오늘은 스타일시트의 백그라운드 속성을 효과적으로 응용한 한가지 사례를 배워보겠습니다.
검색엔진 엠파스에 보시면 검색창에 간혹 백그라운드가 깔려 있는 모습을 본적 있을 겁니다.
키워드를 입력시키려고 하면 백그라운드 이미지가 사라지는...
우선 소스를 살펴보겠습니다.

---------------------------------------------------------------------------------------------------------------------
<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>
---------------------------------------------------------------------------------------------------------------------

    
의견(코멘트)을 작성하실 수 없습니다. 이유: 권한이 없는 회원레벨
번호 Category 제목 글쓴이 등록일 조회
108 일반   FastCopy 한글판
성원이(主人)
2011-01-18 7345
107 일반   Advanced SystemCare Ver3.7.0
성원이(主人)
2010-08-27 7462
106 일반   인터넷 속도를 빠르게...속도패치
성원이(主人)
2010-08-18 7298
105 일반   그누보드 배추스킨 1:1게시판 관련
성원이(主人)
2010-08-12 8045
104 일반   style
성원이(主人)
2010-08-12 6979
일반   input에 이미지 박스 롤링
성원이(主人)
2010-08-12 7781
102 일반   input 박스에 이미지 넣기
성원이(主人)
2010-08-12 7555
101 일반   input에 value값준거 텍스트 클릭시 없애기
성원이(主人)
2010-08-12 4935
100 일반   네이버 검색창
성원이(主人)
2010-08-12 4342
99 일반   네이버 검색창 모양
성원이(主人)
2010-08-12 4407
98 일반   advanced_systemcare
성원이(主人)
2010-07-09 4804
97 일반   알 FTP보다 에러 없고 좋은 에브리존 FTP 1
성원이(主人)
2010-07-08 4775
96 일반   알집보다 좋은 에브리존 집
성원이(主人)
2010-07-08 4836
95 일반   알집을 쓰지 말아야 하는 이유..
성원이(主人)
2010-07-07 5173
94 iPhone Util   아이폰(iPhone) 외장하드로 사용하기 1
성원이(主人)
2010-06-07 5160
93 일반   네이트온 광고 제거하기..
성원이(主人)
2010-05-19 4816
92 일반   간단한 flv 플레이어
성원이(主人)
2010-05-11 5010
91 윈도우7 관련   무료 CD/DVD 레코딩(굽기) 프로그램 CDBurnerXP
성원이(主人)
2010-05-04 5528
90 윈도우7 관련   빠르고 강력한 디스크 조각모음 Smart Defrag
성원이(主人)
2010-05-04 5300
89 윈도우7 관련   윈도우 서비스 목록 자동 최적화 프로그램 SMART Utility
성원이(主人)
2010-05-04 5695
    
1   2   3   4   5   6  
Copyright 1999-2020 Zeroboard / skin by enFree
 
마이베이비다이어리
마이베이비다이어리 소개 이용약관 개인정보취급방침 사이트맵 이메일무단수집거부
 
관리자에게 이메일 보내기
카피씨
Mybabydiary 방문정보
오늘방문자: 102
어제방문자: 206
전체방문자: 884,300
최대방문자: 883
최대동시접속자: 147

현재 접속 하신분
회원: 0
손님: 6
전체: 6

지금 계신분 정보
18.213.192.xxx
66.249.79.xxx
185.191.171.xxx
185.191.171.xxx
185.191.171.xxx
185.191.171.xxx