글
input box 위에 마우스 올리면 위 텍스트가 작은 창같이 떠서 그중에서 클릭하면 그 값이 input box 에 들어가도록 해주는 자바스크립트입니다. ※셀렉트박스가 아니지만, 셀렉트박스와 비슷한 기능을 내게 하는 것이랍니다.
-다른소스 <HTML>
<HEAD>
<TITLE> </TITLE>
<script>
function test(){
html = " <table width='200' cellpadding='1' cellspacing='1' bgcolor='#58aeca'>"
+ " <tr> "
+ " <td valign='bottom' bgcolor='#e0f6fd'><a href='javascript:setup(1);'>사과</a> | <a href='javascript:setup(2);'>바나나</a> | <a href='javascript:setup(3);'>수박</a></td>"
+ " </tr>"
+ " <tr> "
+ " <td align='right' valign='bottom' bgcolor='#e0f6fd'><a href='javascript:divClose();'>[닫기] </a></td>"
+ " </tr>"
+ " </table>"
oElement = document.elementFromPoint(event.x, event.y); //마우스가 움직일때의 대상객체
prevcontent.style.display=''; //레이어를 보이고
prevcontent.style.visibility = "visible";
prevcontent.style.pixelLeft=event.x-100; //레이어의 가로 위치지정
prevcontent.style.pixelTop=document.body.scrollTop+event.y; //레이어의 세로위치 지정
prevcontent.innerHTML=html; //레이어의 내용 출력
}
function divClose(){
prevcontent.style.display='none';
prevcontent.style.visibility = "hidden";
} function setup(tmp){
//값을 셋업하는 부분입니다. 사실 위쪽에 html부분을 수정하면 바로 값을 받아서 셋팅할수도 있겠지요.
var f = document.f1;
if(tmp==1){
f.text1.value="사과";
}else if(tmp==2){
f.text1.value="바나나";
}else if(tmp==3){
f.text1.value="수박";
} }
</script> </HEAD> <BODY>
<div id="prevcontent" style="visibility:hidden;position:absolute;left:10;top:10;background:white;filter:alpha(opacity=90);border: 1px solid;padding:2 2 2 2"></div>
<form name="f1">
<a href="#" onmouseOver="test();"><input type="text" name="text1"></a>
</form>
</BODY>
</HTML>
http://kin.naver.com/detail/detail.php?d1id=1&dir_id=10105&eid=B3IGxpGX3apB9hTTyNDUHgufjkLCy6B0&qb=aW5wdXQgdGV4dCDA2rW/
-다른소스 <HTML>
<HEAD>
<TITLE> </TITLE>
<script>
function test(){
html = " <table width='200' cellpadding='1' cellspacing='1' bgcolor='#58aeca'>"
+ " <tr> "
+ " <td valign='bottom' bgcolor='#e0f6fd'><a href='javascript:setup(1);'>사과</a> | <a href='javascript:setup(2);'>바나나</a> | <a href='javascript:setup(3);'>수박</a></td>"
+ " </tr>"
+ " <tr> "
+ " <td align='right' valign='bottom' bgcolor='#e0f6fd'><a href='javascript:divClose();'>[닫기] </a></td>"
+ " </tr>"
+ " </table>"
oElement = document.elementFromPoint(event.x, event.y); //마우스가 움직일때의 대상객체
prevcontent.style.display=''; //레이어를 보이고
prevcontent.style.visibility = "visible";
prevcontent.style.pixelLeft=event.x-100; //레이어의 가로 위치지정
prevcontent.style.pixelTop=document.body.scrollTop+event.y; //레이어의 세로위치 지정
prevcontent.innerHTML=html; //레이어의 내용 출력
}
function divClose(){
prevcontent.style.display='none';
prevcontent.style.visibility = "hidden";
} function setup(tmp){
//값을 셋업하는 부분입니다. 사실 위쪽에 html부분을 수정하면 바로 값을 받아서 셋팅할수도 있겠지요.
var f = document.f1;
if(tmp==1){
f.text1.value="사과";
}else if(tmp==2){
f.text1.value="바나나";
}else if(tmp==3){
f.text1.value="수박";
} }
</script> </HEAD> <BODY>
<div id="prevcontent" style="visibility:hidden;position:absolute;left:10;top:10;background:white;filter:alpha(opacity=90);border: 1px solid;padding:2 2 2 2"></div>
<form name="f1">
<a href="#" onmouseOver="test();"><input type="text" name="text1"></a>
</form>
</BODY>
</HTML>
http://kin.naver.com/detail/detail.php?d1id=1&dir_id=10105&eid=B3IGxpGX3apB9hTTyNDUHgufjkLCy6B0&qb=aW5wdXQgdGV4dCDA2rW/
'JS > 자바의심' 카테고리의 다른 글
| 웹 개발자, 웹 디자이너를 위한 16가지의 자바 스크립트 / Ajax 효과 (0) | 2009.01.04 |
|---|---|
| 웹페이지의 풀다운메뉴와 트리메뉴 (0) | 2008.10.24 |
| 해상도 별 배경 적용하기 (0) | 2008.10.17 |
| 스크롤 따라 부드럽게 움직이는 레이어 (0) | 2008.07.29 |
| IE6 이하의 버전들을 IE7처럼 보이게 하는 JS라이브러리 (0) | 2008.07.29 |
| input text 자동 형식으로 변경하기 (0) | 2008.07.06 |
| Ajax Shopping Cart (0) | 2008.07.06 |
| Better File Uploads with AJAX and JavaServer Faces (0) | 2008.07.06 |
| Ajax Domain Search (0) | 2008.05.23 |
| 플래시효과의 shopping msn (메뉴같습니다) (0) | 2008.05.23 |
RECENT COMMENT