셀렉트 박스 내용을 레이어로 표현
<HTML>
<HEAD>
<TITLE>http://www.blueb.co.kr</TITLE>
<script>
//SELECT -> LAYER변환
function getSelectToLayer(obj,lwidth,href)
{
if(navigator.userAgent.indexOf('Opera') != -1 || navigator.userAgent.indexOf('MSIE') == -1) { return false; }
obj.style.display = 'none';
var newsb = obj.id + "_sbj";
var newid = obj.id + "_tmp";
var newim = obj.id + "_img";
var LayerTag = "";
LayerTag += "<TABLE WIDTH='"+lwidth+"' CELLSPACING=0 CELLPADDING=0 STYLE='position:absolute;cursor:default;'>";
LayerTag += "<TR HEIGHT=1><TD></TD></TR><TR><TD>";
LayerTag += "<TABLE BGCOLOR='#FFFFFF' HEIGHT=15 WIDTH=100% CELLSPACING=1 CELLPADDING=0 STYLE='border:1 solid #C0C0C0;line-height:117%;' onmouseover=\"getSelectLayerOver(this,document.getElementById('"+newim+"'),document.getElementById('"+newid+"'));\" onmouseout=\"getSelectLayerOut(this,document.getElementById('"+newim+"'),document.getElementById('"+newid+"'));\">";
LayerTag += "<TR WIDTH=100% onclick=\"getSelectSubLayer(document.getElementById('"+newid+"'),document.getElementById('"+newsb+"'));\">";
LayerTag += "<TD ID='"+newsb+"' WIDTH=95% onblur='getSelectLayerBlur(this);'> " + obj.options[obj.selectedIndex].text + "</TD>";
LayerTag += "<TD ALIGN=RIGHT><IMG ID='"+newim+"' SRC='http://www.blueb.co.kr/image/ico/dot_select.gif' ALIGN=absmiddle STYLE='filter:gray();'></TD></TR>";
LayerTag += "</TABLE>";
LayerTag += "<TABLE onblur='getSubLayerClose(this);' ID='"+newid+"' WIDTH=100% CELLSPACING=0 CELLPADDING=0 STYLE='display:none;border:1 solid #C0C0C0;' BGCOLOR='#FFFFFF'>";
for (var i = 0 ; i < obj.length; i++)
{
LayerTag += "<TR onmouseover='getSelectMoveLayer(this);' onmouseout='getSelectMoveLayer1(this);' onclick=\"getSelectChangeLayer(document.getElementById('"+obj.id+"'),document.getElementById('"+newid+"'),document.getElementById('"+newsb+"'),'"+obj.options[i].text+"','"+obj.options[i].value+"','"+href+"');\" ";
if (obj.value == obj.options[i].value)
{
LayerTag += "STYLE='background:#225588;color:#FFFFFF;'><TD> ";
}
else {
LayerTag += "STYLE='background:#FFFFFF;color:#000000;'><TD> ";
}
LayerTag += obj.options[i].text;
LayerTag += "</TD></TR>";
}
LayerTag += "</TABLE>";
LayerTag += "</TD></TR></TABLE><IMG SRC='' WIDTH='"+lwidth+"' HEIGHT=0>";
document.write(LayerTag);
}
//서브레이어보이기
function getSelectSubLayer(obj,sobj)
{
if(obj.style.display == 'none')
{
sobj.style.background = '#FFFFFF';
sobj.style.color = '#000000';
obj.style.display = 'block';
NowSelectedLayer = obj;
obj.focus();
}
else {
sobj.style.background = '#225588';
sobj.style.color = '#FFFFFF';
obj.style.display = 'none';
}
}
//서브레이어체크
function getSelectSubLayer1(obj)
{
if(obj.style.display != 'none')
{
obj.style.display = 'none';
}
}
//타이틀레이어 MouseOver
function getSelectLayerOver(obj,img,nobj)
{
if (nobj.style.display == 'none')
{
obj.style.border = '1 solid #225588';
img.style.filter = '';
}
}
//타이틀레이어 MouseOut
function getSelectLayerOut(obj,img)
{
obj.style.border = '1 solid #C0C0C0';
img.style.filter = 'gray()';
}
//서브레이어 MouseOver
function getSelectMoveLayer(obj)
{
if (obj.style.color == '#000000')
{
obj.style.background = '#225588';
obj.style.color = '#FFFFFF';
}
}
//서브레이어 MouseOut
function getSelectMoveLayer1(obj)
{
obj.style.background = '#FFFFFF';
obj.style.color = '#000000';
}
//새레이어선택
function getSelectChangeLayer(obj,fobj,sobj,text,value,href)
{
if (href)
{
eval("document.DataForm." + href).value = value;
location.href = getThisUrl();
return false;
}
else {
fobj.style.display = 'none';
sobj.innerHTML = ' ' + text;
sobj.style.background = '#225588';
sobj.style.color = '#FFFFFF';
sobj.focus();
obj.value = value;
}
}
//타이틀레이어 blur
function getSelectLayerBlur(obj)
{
obj.style.background = '#FFFFFF';
obj.style.color = '#000000';
}
//서브레이어 닫기
function getSubLayerClose(obj)
{
if (obj.style.display != 'none')
{
setTimeout("document.getElementById('" + obj.id + "').style.display = 'none';" , 150);
}
}
</script>
</HEAD>
<BODY>
<SELECT ID='search_where'>
<OPTION VALUE="ALL">전체에서</OPTION>
<OPTION VALUE="BB_SUBJECT">제목</OPTION>
<OPTION VALUE="BB_Source">Source</OPTION>
<OPTION VALUE="BB_CONTENT">본문</OPTION>
<script language=javascript>getSelectToLayer(document.getElementById('search_where'),80,''); //검색영역select->layer변환</script>
</SELECT>
</BODY>
</HTML>