콤보박스(셀렉트박스다운) 메뉴 미 선택시 컬러 바뀌게...
http://oxtag.com/zboard/zboard.php?id=js&no=439
<form name="qform">
<select name="qsel" onfocus="stop_roll();" onmouseover="stop_roll();" onclick="flag_expand = 'Y';" onblur="flag_expand = 'N'; start_roll();" onmouseout="start_roll();" onchange="eval(this.value); this.blur();">
<option>-선 택-</option>
<option value="window.open('http://www.empas.com/');">엠파스</option>
<option value="window.open('http://www.naver.com/');">네이버</option>
<option value="window.open('http://www.daum.net/');">다음</option>
<option value="alert('My name is Camelot. ^-^ㆀ'); alert('Nice to meet you!');">Who are you?</option>
<option value="document.body.style.background = '#AAAAAA';">배경색 바꾸기</option>
<option value="document.body.style.background = '';">배경색 원래대로</option>
</select>
</form>
<script language="javascript">
<!--
var obj = document.qform.qsel, flag_expand = 'N', cnt = 1, timer;
function start_roll(){
var color_=new Array('#ff9900','#33CC00');
if(flag_expand == 'N'){
if(cnt >= obj.length) cnt = 1;
obj.options[cnt].selected = true;
obj.options[cnt].style.color= cnt% 2 == 0 ? color_[0] : color_[1];
cnt++;
timer=setTimeout('start_roll()', 1000);
}
}
function stop_roll(){
obj.options[0].selected = true;
clearTimeout(timer);
}
start_roll();
//-->
</script>
'인터넷정보' 카테고리의 다른 글
무단링크 방지 (0) | 2007.10.18 |
---|---|
iframe 리로드 시키기 (0) | 2007.10.18 |
자바 스크립트로 md4, md5, hex 변환하기 (0) | 2007.10.18 |
날아 다니는 이미지 (0) | 2007.10.18 |
레이어 셀렉트 박스 최상위에... (0) | 2007.10.18 |
새창 가운데 띄우기 (0) | 2007.10.18 |
지정 시간 후 재생 시작되는 스크립트 (0) | 2007.10.18 |
포커스 하일라이트 주기 (0) | 2007.10.18 |
페이지 확대 / 페이지 축소 (0) | 2007.10.18 |
한글만 되게 하기 (0) | 2007.10.18 |
셀렉트 박스 꾸미기 - select
http://oxtag.com/html/ex/selectbox/selectbox/selectbox20070510.html
<title>셀렉트박스 꾸미기</title>
<script>
//셀렉트박스 꾸미기 v1.2
//================================================ JS
var zindex = 10000;
select_count = new Array();
ev_click = new Array();
function insert_select ( sn,w,f,b,g,c,img,event) {
ev_click[sn] = event;
select_count[sn] = 0;
zindex--;
document.write("<input type=hidden name="+sn+" id="+sn+" value=''>");
document.write(" <table border='0' cellspacing='1' cellpadding='1' width='"+w+"' style='table-layout:fixed;width:"+w+";' bgcolor='"+b+"' onclick='select_click(\""+sn+"\");' >");
document.write(" <tr>");
document.write(" <td bgcolor='"+g+"'>");
document.write(" <input type='text' id='"+sn+"_select_name' name='"+sn+"_select_name' style='border:none;cursor:hand;width:100%;font-size:"+f+"pt;' onselectstart=\"return false\" readonly> ");
document.write(" </td>");
if(img != "") {
document.write(" <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'><img src='"+img+"' align='absmiddle'></td>");
} else {
document.write(" <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'>▽</td>");
}
document.write(" </tr>");
document.write(" </table>");
document.write("<div id='"+sn+"_select_div' name='"+sn+"_select_div' style='display:none;z-index:"+zindex+";position:absolute;cursor:hand' onmouseover='"+sn+"_select_div.style.display=\"\";' onmouseout='"+sn+"_select_div.style.display=\"none\";'>");
document.write(" <table border='0' cellspacing='1' cellpadding='1' bgcolor='"+b+"' width="+w+" onmouseover='"+sn+"_select_div.style.display=\"\";'>");
document.write(" <tr><td bgcolor='"+g+"' style='line-height:1.3em;' id='"+sn+"_select_span'></td></tr>");
document.write(" </table>");
document.write(" </div>");
}
function insert_select_option(sn,f,b,g,c,v,vv,chk) {
select_count[sn] ++;
option_html = "<span style='width:100%;font-size:"+f+"pt' onclick='"+sn+"_select_name.value=\""+vv+"\";"+sn+".value=\""+v+"\";"+sn+"_select_div.style.display=\"none\";"+ev_click[sn]+";' onmouseover='this.style.background=\""+c+"\"' onmouseout='this.style.background=\""+g+"\"'>"+vv+"</span><br>";
if(select_count[sn] == 1 || chk == "Y" ) {
document.getElementById( sn+"_select_name" ).value = vv
document.getElementById( sn).value = v
}
document.getElementById( sn+"_select_span").innerHTML += option_html;
}
function select_click(sn) {
if ( document.getElementById( sn+"_select_div").style.display == "none") {
document.getElementById( sn+"_select_div").style.display = "";
} else {
document.getElementById( sn+"_select_div").style.display = "none";
}
}
////================================================ JS
</script>
<table>
<tr>
<td>
<script>
////================================================ 사용
//insert_select(저장변수명,가로,폰트크기,보드색,배경색,선택색,화살표이미지);
insert_select("test3","70","8","F6D8B0","FFFFFF","F6D8B0","");
//insert_select_option(저장변수명,폰트크기,보드색,배경색,선택색,value,view_value,초기선택여부:(Y선택);
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","1","1번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","2","2번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","3","3번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","4","4번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","5","5번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","6","6번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","7","7번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","8","8번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","9","9번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","10","10번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","11","11번","Y");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","12","13번");
////================================================ 사용
</script>
</td>
<td>
<input type="button" onclick="alert(document.all.test3.value);" value="테스트">
</td>
</tr>
</table>
'인터넷정보' 카테고리의 다른 글
특정 폴더 내 모든 파일 리스트 불러오기 함수 (0) | 2007.10.11 |
---|---|
PHP 변수 속도 테스트 (0) | 2007.10.11 |
웹하드 - webHard (0) | 2007.10.11 |
음성게시판 모듈 (0) | 2007.10.11 |
웹 대용량 파일 업로드 모듈 (0) | 2007.10.11 |
css로 만든 2중 라운드 테이블 (0) | 2007.10.11 |
월의 몇째 주인지, 이달의 총 주 (0) | 2007.10.11 |
[PHP] 영문과 한글 브라우저 구분 방법 (0) | 2007.10.11 |
간단한 페이징 소스 (0) | 2007.10.11 |
nuSoap을 이용한 서버간의 파일전송 (0) | 2007.10.11 |
select 박스 제어하기
미리보기 : http://oxtag.com/html/ex/select20070412.html
<script type="text/javascript" language="javascript">
<!--
function selectChg(val) {
document.getElementById('test').value = val;
}
//-->
</script>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
또는..
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
document.getElementById('test').options[val].selected = true;
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('0');">한국</a>
<a href="javascript:selectChg('1');">일본</a>
<a href="javascript:selectChg('2');">중국</a>
<a href="javascript:selectChg('3');">호주</a>
또는
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
if (f.options[i].value == val) { f.options[i].selected = true; }
}
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
또는
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
if (f[i].value == val) { f.selectedIndex = i; break;}
}
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
'인터넷정보' 카테고리의 다른 글
런타임으로 자바스크립트 화일 열기 (0) | 2007.10.11 |
---|---|
마우스 오버시 테이블 한줄 색깔 바꾸기 (0) | 2007.10.11 |
간단한 php 달력 (0) | 2007.10.11 |
php로 pop3 데몬을 만들기 (0) | 2007.10.11 |
페이징 함수 (0) | 2007.10.11 |
이미지 없이 모서리 없는 둥근 테이블 만들기 (0) | 2007.10.11 |
fsockopen으로 제작한 http확장클래스 (0) | 2007.10.11 |
3 of 9 바코드 그리기 (0) | 2007.10.11 |
HTML 4.01 엔티티(Entities) (0) | 2007.10.11 |
아파치 웹 서버 무단 링크 방지 (0) | 2007.10.11 |
select 태그 활용법 - 셀렉트박스, 콤보박스
<P>select 태그 예제
<SELECT>
<OPTGROUP LABEL="select1"> //option 을 그룹지움
<OPTION value="option1-1">option1-1</OPTION>
<OPTION value="option1-2">option1-2</OPTION>
<OPTION value="option1-3">option1-3</OPTION>
<OPTION value="option1-4">option1-4</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="select2">
<OPTION value="option2-1">option2-1</OPTION>
<OPTION value="option2-2">option2-2</OPTION>
<OPTION value="option2-3">option2-3</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="select3">
<OPTION value="option3-1">option3-1</OPTION>
<OPTION value="option3-2">option3-2</OPTION>
<OPTION value="option3-3">option3-3</OPTION>
<OPTION value="option3-4">option3-4</OPTION>
<OPTION value="option3-5">option3-5</OPTION>
<OPTION value="option3-6">option3-6</OPTION>
</OPTGROUP>
</SELECT>
</P>
'인터넷정보' 카테고리의 다른 글
fsockopen으로 제작한 http확장클래스 (0) | 2007.10.11 |
---|---|
3 of 9 바코드 그리기 (0) | 2007.10.11 |
HTML 4.01 엔티티(Entities) (0) | 2007.10.11 |
아파치 웹 서버 무단 링크 방지 (0) | 2007.10.11 |
insertAdjacentHTML 지정된 위치에 HTML 삽입 (0) | 2007.10.11 |
PHP에 포함된 변수 , 상수 , 함수 알아보기 (0) | 2007.10.11 |
file 버튼 이미지로 바꾸기 (0) | 2007.10.11 |
즐겨찾기 추가 , 시작페이지 설정 하는 스크립 (0) | 2007.10.11 |
오른쪽면에 배너 붙이는 style (0) | 2007.10.11 |
[PHP] 파일 확장자 추출 (0) | 2007.10.11 |