WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

레이어를 이용한 서브 메뉴

이온디

2007년 09월 10일

<head>

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}
.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("maindiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>

</head>

<body>

<div id="maindiv">

<div class="menutitle" onMouseOver="SwitchMenu('sub1')">첫번째 메뉴</div>
<span class="submenu" id="sub1">
- <a href="">첫번째 메뉴-1</a><br>
- <a href="">첫번째 메뉴-2</a><br>
- <a href="">첫번째 메뉴-3</a><br>
- <a href="">첫번째 메뉴-4</a>
</span>

<div class="menutitle" onMouseOver="SwitchMenu('sub2')">두번째 메뉴</div>
<span class="submenu" id="sub2">
- <a href="">두번째 메뉴-1</a><br>
- <a href="">두번째 메뉴-2</a><br>
- <a href="">두번째 메뉴-3</a>
</span>

<div class="menutitle" onMouseOver="SwitchMenu('sub33')">세번째 메뉴</div>
<span class="submenu" id="sub33">
- <a href="">세번째 메뉴-1</a><br>
- <a href="">세번째 메뉴-2</a><br>
- <a href="">세번째 메뉴-3</a>
</span>

</div>

</body>

<html>
<head>

<script language="JavaScript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document;
if(d.images){
if(!d.MM_p)
d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];
}
}
}

function MM_findObj(n, d) { //v4.0
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);

return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc)
x.oSrc=x.src;
x.src=a[i+2];
}
}

function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}

</script>

<style type="text/css">
.submenu { font-family: "돋움"; font-size: 9pt; color: #FFFFFF; text-decoration: none}
</style>

</head>

<body bgcolor="#FFFFFF" text="#000000" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 onLoad="MM_preloadImages('./img/topmenu_01_over.gif','./img/topmenu_02_over.gif','./img/topmenu_03_over.gif','./img/topmenu_04_over.gif','./img/topmenu_05_over.gif','./img/topmenu_06_over.gif','./img/topmenu_07_over.gif','./img/topmenu_08_over.gif','./img/topmenu_09_over.gif')">
<table width="1002" border=0 cellspacing="0" cellpadding="0">
<tr>
<td height="143"></td>
</tr>
<tr>
<td>
<table width="1002" border=0 cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="1002" border=0 cellspacing="0" cellpadding="0">
<tr>
<td width="97"><a href="/helpdesk/service/webhosting/web_definition.htm" onMouseOver="MM_swapImgRestore();MM_swapImage('Image8','','/img/topmenu_01_over.gif',1);MM_showHideLayers('web','','show','power','','hide','ser','','hide','str','','hide','do','','hide','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image8" border=0 src="/img/topmenu_01.gif" width="97" height="36"></a></td>
<td width="114"><a href="/helpdesk/service/power_definition.html" onMouseOver="MM_swapImgRestore();MM_swapImage('Image9','','/img/topmenu_02_over.gif',1);MM_showHideLayers('web','','hide','power','','show','ser','','hide','str','','hide','do','','hide','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image9" border=0 src="/img/topmenu_02.gif" width="114" height="36"></a></td>
<td width="103"><a href="/helpdesk/service/serverhosting/server_definition.htm" onMouseOver="MM_swapImgRestore();MM_swapImage('Image10','','/img/topmenu_03_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','show','str','','hide','do','','hide','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image10" border=0 src="/img/topmenu_03.gif" width="103" height="36"></a></td>
<td width="123"><a href="/helpdesk/service/streaming/streaming_01.html" onMouseOver="MM_swapImgRestore();MM_swapImage('Image11','','/img/topmenu_04_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','show','do','','hide','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image11" border=0 src="/img/topmenu_04.gif" width="123" height="36"></a></td>
<td width="121"><a href="http://echosting.cafe24.com" target=_blank onMouseOver="MM_swapImgRestore();MM_swapImage('Image12','','/img/topmenu_05_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','hide','do','','hide','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image12" border=0 src="/img/topmenu_05.gif" width="121" height="36"></a></td>
<td width="111"><a href="/helpdesk/domain/domain_definition.htm" onMouseOver="MM_swapImgRestore();MM_swapImage('Image13','','/img/topmenu_06_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','hide','do','','show','disk','','hide','add','','hide','myinfo','','hide')"><img name="Image13" border=0 src="/img/topmenu_06.gif" width="111" height="36"></a></td>
<td width="115"><a href="/webhard/webdisk_difinition.html" onMouseOver="MM_swapImgRestore();MM_swapImage('Image14','','/img/topmenu_07_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','hide','do','','hide','disk','','show','add','','hide','myinfo','','hide')"><img name="Image14" border=0 src="/img/topmenu_07.gif" width="115" height="36"></a></td>
<td width="106"><a href="/etc_service/E01/E_01_builder.html" onMouseOver="MM_swapImgRestore();MM_swapImage('Image15','','/img/topmenu_08_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','hide','do','','hide','disk','','hide','add','','show','myinfo','','hide')"><img name="Image15" border=0 src="/img/topmenu_08.gif" width="106" height="36"></a></td>
<td width="112"><a href="/myinform/myinfo_start.html" onMouseOver="MM_swapImgRestore();MM_swapImage('Image16','','/img/topmenu_09_over.gif',1);MM_showHideLayers('web','','hide','power','','hide','ser','','hide','str','','hide','do','','hide','disk','','hide','add','','hide','myinfo','','show')"><img name="Image16" border=0 src="/img/topmenu_09.gif" width="112" height="36"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="1002" border=0 cellspacing="0" cellpadding="0">
<tr>
<td height="22" bgcolor="1F81B8" class="submenu" valign=top>
<div id="web" style="Z-INDEX: 1; LEFT: 21px; WIDTH: 400px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="350" border=0 cellspacing="0" cellpadding="0">
<tr>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</table>
</div>
<div id="power" style="Z-INDEX: 2; LEFT: 116px; WIDTH: 400px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu"> <table width="400" border=0 cellspacing="0" cellpadding="0">
<tr>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</table>
</div>
<div id="ser" style="Z-INDEX: 3; LEFT: 225px; WIDTH: 300px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="300" border=0 cellspacing="0" cellpadding="0">
<tr>
<tbody>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="str" style="Z-INDEX: 4; LEFT: 321px; WIDTH: 500px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="500" border=0 cellspacing="0" cellpadding="0">
<tr>
<tbody>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="do" style="Z-INDEX: 5; LEFT: 587px; WIDTH: 300px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="300" border=0 cellspacing="0" cellpadding="0">
<tr>
<tbody>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="disk" style="Z-INDEX: 6; LEFT: 693px; WIDTH: 250px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="280" border=0 cellspacing="0" cellpadding="0">
<tr>
<tbody>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="add" style="Z-INDEX: 7; LEFT: 196px; WIDTH: 800px; POSITION: absolute; TOP: 184px; HEIGHT: 19px; visibility: hidden" class="submenu">
<table width="800" border=0 cellspacing="0" cellpadding="0">
<tr>
<tbody>
<td class="submenu">
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a> l
<a class="submenu">서브메뉴</a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

/* SCRATCH LIST */
#scratchHeader {position: absolute;
width: 100%;
right: 0;
top: 66px;}
#scratchHeader .wrap {position: relative;}
#scratchButton {padding: 5px 94px 5px 10px;
position: absolute;
right: 0;
top: 0;}
#scratchBody {position: absolute;
width: 100%;
height: 300px;
top: 90px;
left: 0;}
#scratchBody .wrap {position: relative;
height: 100%;}
#scratchClip {position: absolute;
width: 211px;
height: 300px;
top: 0;
right: 0;}
#scratchMenu {width: 211px;
height: 300px;}
#scratchMenu .lists {height: 278px;
width: 211px;
overflow: auto;}
#scratchMenu .music, #scratchMenu .users {margin: 0 6px 0 6px;}
#scratchMenu .music {margin-top: 5px;
margin-bottom: 5px;}
#scratchMenu .users {margin-bottom: 5px;}
#scratchMenu .controls li {display: inline;}
#scratchMenu .controls {height: 24px;
left: -1px;
width: 211px;}
#scratchMenu .controls a {width: 100%;
height: 100%;
padding : 5px 9px 5px 10px;
position: relative;
top: 5px;}

/* BACKGROUND COLORS */
#scratchButton, #scratchMenu .controls {background-color: #555555;}
#scratchMenu {background-color: #666666;}
#header .wrap {background-color: #000000;}
</style>

// Creates Elements
// Accepts multiple arguments
// Used to create flying plus signs
function newChild(appendTo, appendType, optionalParam, optionalValue) {
var obj = appendTo.appendChild(document.createElement(appendType));
if(arguments.length > 2) {
for(var i=2; i<arguments.length; i=i+2) {
if(arguments[i].indexOf("style.") != -1) {
obj.style[arguments[i].substring(6)] = arguments[i+1];
} else {
obj[arguments[i]]= arguments[i+1];
}
}
}
return obj;
}

// Creates text nodes
// Used to create flying plus signs
// Useage: newTextNode(appendTo, "A text node.");
function newTextNode(appendTo, appendText) {
return appendTo.appendChild(document.createTextNode(appendText));
}

StyleSheet Manipulation Object

?2004 Polychrome Studio, Inc.
http://www.polychrome.org/

- - - - - - - - - - - - - - -

Adapted from Paul Swoden's style switcher featured on A List Apart:
http://www.alistapart.com/stories/alternate/

- - - - - - - - - - - - - - -

Dependencies: cookie.js

function TypeSizer() {

this.style.setCookied();

} TypeSizer.prototype = {

style : new StyleController('TypeSize'),

bumpUp : function() {
this.style.set('TypePlus1');
this.style.save();
},

bumpDown : function() {
this.style.set('TypeStandard');
this.style.save();
}

}

typeSizer = new TypeSizer;/*

Scratch List Object
Creates a scratch list and manages its contents

Note: innerHTML is several times faster than creating nodes the DOM way.
Refer to Peter-Paul Koch's example at http://www.quirksmode.org/dom/innerhtml.html
For this reason, the ScratchList HTML structure has been hard-coded into this script.

// Workaround. We have IE5Mac to thank (again) for this one.
// This function is called at the bottom of each page to create the HTML
// skeleton of the scratch list.
// IE5Mac + Javascript Creating Nodes + Absolute Positioning = crap (in this case, anyway)
function makeScratchBody() {
document.write('<div id="scratchBody"><div class="wrap"><div id="scratchClip" style="visibility: hidden;"><div id="scratchMenu" onmouseover="sm.show()" onmouseout="sm.hide()"> <ul class="lists"> <li class="music">Music <span class="pipe">|</span> <span id="smlMusic">00</span><ul id="smlMusicList"></ul></li><li class="users">Members <span class="pipe">|</span> <span id="smlUsers">00</span><ul id="smlUserList"></ul></li></ul><ul class="controls"><li class="clear"><a href="#" onclick="sl.clear();return false;" onfocus="this.blur()" class="clear">Clear List</a></li><li class="manage "><a href="#" onClick="goToDashboard(\'/listmanager/music\'); return false;" class="manage"><span class="loggedin-inline">Manage List</span></a></li></ul></div></div></div></div>');
}

function ScratchList()
{
// Name of cookie
this.cookieName = this.cookie.name = 'scratchlist';

// Create Scratch Button
var buttonInnerHTML = '<div class="wrap"><a id="scratchButton" href="#" onclick="return false;" onmouseover="sm.show()" onmouseout="sm.hide()">Scratch List <span id="smbMusic" class="music">00</span> <span class="pipe">|</span> <span id="smbUsers" class="users">00</span> </a></div>';
newChild(document.body, 'div', 'id', 'scratchHeader', 'innerHTML', buttonInnerHTML);

// External references

this.musicBarCounter = document.getElementById('smbMusic');
this.musicListCounter = document.getElementById('smlMusic');
this.musicList = document.getElementById('smlMusicList');

this.userBarCounter = document.getElementById('smbUsers');
this.userListCounter = document.getElementById('smlUsers');
this.userList = document.getElementById('smlUserList');

}

ScratchList.prototype = {

// Cookie object
cookie : new Cookie(),

// Saves the scratchlist in a cookie
save : function() {

var data = this.prepareCookie(this.musicList) + '||' + this.prepareCookie(this.userList);
if(data.length < 3072) {
this.cookie.bake(data, 1000*60*60*24, '/', 'music.com');
}
},
// Stores the scratchlist in a form variable
store : function(formfield) {
var data = this.prepareCookie(this.musicList);
data += this.prepareCookie(this.userList);
data = data.replace(/\|{2}$/, ''); //trim the trailing ||
formfield.value = data;
},

// Return total size of both lists
listSize : function() {
return this.userList.childNodes.length + this.musicList.childNodes.length;
},

// Clears the Scratch List
clear : function() {
while(this.musicList.childNodes.length > 0) this.musicList.removeChild(this.musicList.childNodes[0]);
while(this.userList.childNodes.length > 0) this.userList.removeChild(this.userList.childNodes[0]);
this.updateCounts(true);
this.updateCounts(false);
// Return all [-] signs to [+] signs
// Is it faster to just iterate over everything or pattern match?
var a = document.getElementById('content').getElementsByTagName('a');
for(i=0; i<a.length; i++) {
if(a[i].firstChild.nodeValue == '[-]') {
a[i].firstChild.nodeValue = '[+]';
}
}

this.cookie.eat();

if(document.images) {
(new Image()).src="/files/attach/images/20240/404/089/0ccb9d441eb0bf23029bc9e927dc7c4a.gif" + "&rnd=" + Math.random();
}

},

// Loads the scratchlist data from a provided cookie
loadData : function(cookieData) {
if(this.cookie.look()) {

// handle the php urlencoded cookie
var c = this.cookie.get(cookieData);
c = decode(c);
c = c.replace(/\+/g," ");
var entry, items = c.split('||'), urls = new Array();
if(items[0] != '') { //safety
for(var i=0; i<items.length; i++) {
if(items[i] != '') {
entry = items[i].split('|');
//urls.push("'"+entry[1]+"'"); //not on ie5mac (JS 1.4?)
urls[i] = "'"+entry[1]+"'";
var type = (entry[2] == 1) ? this.addUsers(entry[0], entry[1], false) : this.addMusic(entry[0], entry[1], false);
}
}
}

// Update corresponding URLs
eval("updateMarks('[-]', "+urls.toString()+")");

}

function decode(s) {
return typeof(decodeURIComponent) == 'function' ? decodeURIComponent(s) : unescape(s);
}
},

// Formats scratchlist data for storing as a cookie
// Called by save()
prepareCookie : function(list)
{
//alert('preparing cookie...');
var data = '',fc='', resource, urlStrip = /^(https?:\/\/[a-zA-Z0-9:]*(\.[a-zA-Z0-9]+)*\/)(.*)\/$/;
//alert('entering cookie preparation loop...');
for(var i=0; i<list.childNodes.length; ++i)
{
var rex = new RegExp(urlStrip);
//alert("we're trying to match:\n"+list.childNodes[i].firstChild.href+"\nwith\n"+rex+"\nBut will it work in Safari?");
//alert(rex.test(list.childNodes[i].firstChild.href));
//alert(list.childNodes[i].firstChild.href.search(urlStrip));
resource = (list.childNodes[i].firstChild.href.match(urlStrip))[3]; //strip down URL

fc = list.childNodes[i].firstChild.firstChild;
data += fc.nodeValue + '|' + resource + '|' + ((list == this.userList) ? 1:0) + '||';
}

if(data != '') {
data = data.substr(0, data.length - 2);
}

return data;
},

// Adds entries to the music list
addMusic : function(linkText, linkURL, dosave) {
this.addItems(this.musicList, dosave, [arguments[0], arguments[1]]);
this.updateCounts(true);
},

// Adds users to the music list
addUsers : function(linkText, linkURL, dosave) {
this.addItems(this.userList, dosave, [arguments[0], arguments[1]]);
this.updateCounts(false);
},

removeMusic : function(url, dosave) {
this.removeItems(this.musicList, url, dosave);
this.updateCounts(true);
},

removeUsers : function(url, dosave) {
this.removeItems(this.userList, url, dosave);
this.updateCounts(false);
},

// Adds items to the appropriate list
addItems : function(targetObj, dosave, moreArguments) {
for(var i=0; i<moreArguments.length; i=i+2) {
moreArguments[i+1] = 'http://music.com/' + moreArguments[i+1] + '/'; //add slashes to correct URL
if(document.body.innerHTML) { //speedy innerHTML
//moreArguments[i+1] = moreArguments[i+1];
newLink = moreArguments[i].toString().link(moreArguments[i+1]);
newChild(targetObj, 'li', 'innerHTML', newLink);
} else { //slower DOM technique
var newItem = newChild(targetObj, 'li');
var newLink = newChild(newItem, 'a', 'href', moreArguments[i+1]);
newTextNode(newLink, moreArguments[i]);
}
}

if(dosave) {
this.save();
}
},

// Check for duplicate entries
duplicateFound : function(targetObj, url) {
if(targetObj.childNodes.length >= 0) {
for(var i=0; i<targetObj.childNodes.length; i++) {
if(targetObj.childNodes[i].firstChild.href.search(new RegExp('('+ url + '/)$')) >= 0) {
return true;
}
}
return false;
}
},

// Removes items from the appropriate list
removeItems : function(targetObj, url, dosave) {
for(var i = targetObj.childNodes.length-1; i>=0; i--) {
if(targetObj.childNodes[i].firstChild.href.search(new RegExp('('+url+'/)$')) >= 0) {
targetObj.removeChild(targetObj.childNodes[i]);
break;
}
}

if(dosave) {
this.save();
}
this.munchIfEmpty();
},

// Update list counts
updateCounts : function(boolMusic) {
if(boolMusic) var count1 = this.musicBarCounter, count2 = this.musicListCounter, list = this.musicList; //music
else var count1 = this.userBarCounter, count2 = this.userListCounter, list = this.userList; //users
count1.innerHTML = count2.innerHTML = this.formatInt(list.childNodes.length);
},

// Poor man's sprintf()
// Pads an integer with a zero if necessary
formatInt : function(n) {
if(n < 10 && n > -10) n = '0' + n;
return n;
},

// Munch the cookie if both lists are empty
munchIfEmpty : function() {
if(this.musicList.childNodes.length <= 0 && this.userList.childNodes.length <= 0) this.cookie.eat();
}

};/*
SlidingMenu
- - - - - - - - - - - - - - - - - - - - - - - -
?2003 by Polychrome Studio, Inc. for Music.com
http://www.polychrome.org/
- - - - - - - - - - - - - - - - - - - - - - - -
Based somewhat on ypSlideOutMenus by Aaron
Boodman, a.k.a. Youngpup.
http://www.youngpup.net/
- - - - - - - - - - - - - - - - - - - - - - - -
*/

//function SlidingMenu(slideObj, clipObj, direction)
function SlidingMenu(clipObj, slideObj, direction)
{

// Public variables
this.redrawRate = 10; // milliseconds per redraw
this.hideDelay = 1000; // milliseconds before menu hides
this.aniLen = 250; // milliseconds per slide

this.opening = new Function(); // fired when menu opens
this.opened = new Function(); // fired when menu is fully open
this.closing = new Function(); // fired when menu begins closing
this.closed = new Function(); // fired when menu is fully closed

// Protected variables
this.slideObj = slideObj;
this.clipper = clipObj;
this.dir = direction;

// Private variables
this.isOpen; //stores whether menu is open or closed. boolean.
this.expanded; //pixel measurement of menu when fully opened
this.collapsed; //pixel measurement of menu when closed
this.openClipSetting; //clip rectangle expression for menu when opening
this.closeClipSetting; //clip rectangle expression for menu when closing
this.collapseClipSetting; //clip rectangle expression for menu when collapsed
this.startTime; //time that animation began
this.step; //stores interval id for slide animation;
this.timer; //stores interval id for menu closing timer

// Global reference to self (used in recursion)
this.gRef = 'SlidingMenu_' + (new Date()).getTime();
eval(this.gRef+'=this');

// Open/Show Menu
// Access: public
this.show = function() {
if(this.timer) this.stopTimer();
if(!this.isOpen && !this.step) {
this.opening(); //empty function
this.startSlide(true);
}
};

// Close/Hide Menu
// Sets the timer for the menu to close
// Access: public
this.hide = function() {
if(this.timer) this.stopTimer();
this.startTimer();
};

// Actually closes the menu
// Called when the timer runs out
// Access: private
this.closeMenu = function() {
this.stopTimer();
if(this.isOpen && !this.step) {
this.closing(); //empty function
this.startSlide(false);
};
};

// Begins the countdown timer for menu closing
// Access: protected
this.startTimer = function() {
this.timer = setInterval(this.gRef+".closeMenu()", this.hideDelay);
};

// Begins the countdown timer for menu closing
// Access: protected
this.stopTimer = function() {
clearInterval(this.timer);
this.timer = false;
};

// Initiate slide movement
// Called before slide begins
// Access: private
this.startSlide = function(boolOpen) {
this.isOpen = boolOpen;
this.clipper.style.display = ''; //make object visible
this.setVars(); //reset variables incase direction setting has changed
this.accelConst = (this.expanded - this.collapsed) / this.aniLen / this.aniLen; //calculate accelleration
this.startTime = (new Date()).getTime();
this.step = setInterval(this.gRef+'.slide('+boolOpen+')', this.redrawRate); //begin recursion/animation
};

// Initiate slide movement
// Called when slide is finished
// Access: private
this.endSlide = function() {
clearInterval(this.step);
this.step = false;
if(this.isOpen) {
this.opened(); //empty function

// Be sure menu is 100% open
switch(this.dir) {
case 'right': this.slideObj.style.right = '0px'; break;
case 'left' : this.slideObj.style.left = '0px'; break;
default : this.slideObj.style.top = '0px'; break; //up or down
}

} else {
this.clipper.style.display = 'none';
this.closed(); //empty function
}
};

// Adjust clipping property to simulate movement
// This function is called recursively
// Access: private
this.slide = function(boolOpen) {
var elapsed = (new Date()).getTime() - this.startTime;
if(elapsed > this.aniLen) {
this.endSlide();
} else {

var t = Math.round(Math.pow(this.aniLen - elapsed, 2) * this.accelConst);

switch(this.dir) {
case 'up':
if(boolOpen) this.slideObj.style.top = t+'px';
else this.slideObj.style.top = (this.getHeight() - t)+'px';
break;
case 'right':
if(boolOpen) this.slideObj.style.right = t+'px';
else this.slideObj.style.right = (this.getWidth() - t)+'px';
break;
case 'left':
if(boolOpen) this.slideObj.style.left = t+'px';
else this.slideObj.style.left = (this.getWidth() - t)+'px';
break;
case 'slurpup':
if(boolOpen) this.slideObj.style.top = t+'px';
else this.slideObj.style.top = (t - this.getHeight())+'px';
break;
case 'slurpright':
if(boolOpen) this.slideObj.style.left = '-'+t+'px';
else this.slideObj.style.left = (this.getWidth() - t)+'px';
break;
default: //down. using "top" property because of IE bugginess
if(boolOpen) this.slideObj.style.top = '-'+t+'px';
else this.slideObj.style.top = (t - this.getHeight())+'px';
break;
}

}
};

// Return old clip properties as array(4) - Array(top, right, bottom, left)
// Access: protected
// This function does not work with IE5 Mac!
/*
this.getClip = function(){
var obj = this.slideObj;
//Match one setting (i.e. 100): (?:(\d\d*)(?:px)?,?\s*)
obj.style.clip.match(/(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)/); //Is there a cleaner way to do this?
return new Array(RegExp.$1, RegExp.$2, RegExp.$3, RegExp.$4);
};
*/

// Set clip attributes
// Access: protected
// Returns: old clip properties as array(4)
this.setClip = function(top, right, bottom, left){
var obj = this.clipper;
// Lines commented out to save IE5 Mac...
//var oldClip = this.getClip();
obj.style.clip = 'rect('+top+'px, '+right+'px, '+bottom+'px, '+left+'px)';
//return oldClip;
};

// Set clipping rectangle to slideObj's outermost boundaries
// Access: private
this.resetClip = function(){
this.setClip(0, this.getWidth(), this.getHeight(), 0);
};

// Get an object's width
// Access: private
this.getWidth = function(){
return this.slideObj.offsetWidth;
};

// Get an object's height
// Access: private
this.getHeight = function(){
return this.slideObj.offsetHeight;
};

// Assign event handler to object
// Access public
this.addEventHandler = function(obj, eventName, funktion, bubbling) {
if(window.attachEvent) { //ie
obj.attachEvent('on'+eventName, funktion);
obj.attachEvent('on'+eventName, funktion);
} else if(window.addEventListener) { //non-ie
obj.addEventListener(eventName, funktion, bubbling);
obj.addEventListener(eventName, funktion, bubbling);
}
};

// Set standard variables based on set direction
// Access: private
this.setVars = function() {
switch(this.dir) {
case ('left'||'right'): this.expanded = this.getWidth(); break;
default: this.expanded = this.getHeight(); //down, up
}
this.collapsed = 0;
};

// Init
this.setVars();
//this.clipper.style.display = 'none'; //initially hide the menu
if(this.slideObj.style.position != 'absolute') this.slideObj.style.position = 'absolute'; //menu must be absolutely positioned!
if(this.clipper.style.position != 'absolute') this.clipper.style.position = 'absolute'; //clipobj must be absolutely positioned!
if(this.clipper.style.overflow != 'hidden') this.clipper.style.overflow = 'hidden'; //overflow of clipobj must be hidden to avoid scrollbar issues!
this.resetClip();

// Set initial position
if(this.dir=='up' || this.dir=='slurpup') this.slideObj.style.top = this.getHeight()+'px';
else if(this.dir=='left' || this.dir=='slurpleft') this.slideObj.style.left = this.getWidth() +'px';
else if(this.dir=='right' || this.dir=='slurpright') this.slideObj.style.right = this.getWidth() +'px';
else this.slideObj.style.top = '-'+this.getHeight()+'px'; //down. using "top" property due to ie bugginess

}
/*
Rolling Menu
- - - - - - - - - - - - - - - - - - - - - - - -
?2003 by Polychrome Studio, Inc. for Music.com
http://www.polychrome.org/
- - - - - - - - - - - - - - - - - - - - - - - -
Based somewhat on ypSlideOutMenus by Aaron
Boodma, a.k.a. Youngpup.
http://www.youngpup.net/
- - - - - - - - - - - - - - - - - - - - - - - -
*/

function RollingMenu(slideObj, direction)
{

// Public variables
this.redrawRate = 10; // milliseconds per redraw
this.hideDelay = 1000; // milliseconds before menu hides
this.aniLen = 250; // milliseconds per slide

this.opening = new Function(); // fired when menu opens
this.opened = new Function(); // fired when menu is fully open
this.closing = new Function(); // fired when menu begins closing
this.closed = new Function(); // fired when menu is fully closed

// Protected variables
this.slideObj = slideObj;
this.dir = direction;

// Private variables
this.isOpen; //stores whether menu is open or closed. boolean.
this.expanded; //pixel measurement of menu when fully opened
this.collapsed; //pixel measurement of menu when closed
this.openClipSetting; //clip rectangle expression for menu when opening
this.closeClipSetting; //clip rectangle expression for menu when closing
this.collapseClipSetting; //clip rectangle expression for menu when collapsed
this.startTime; //time that animation began
this.step; //stores interval id for slide animation;
this.timer; //stores interval id for menu closing timer

// Global reference to self (used in recursion)
this.gRef = 'SlidingMenu_' + (new Date()).getTime();
eval(this.gRef+'=this');

// Open/Show Menu
// Access: public
this.show = function() {
if(this.timer) this.stopTimer();
if(!this.isOpen && !this.step) {
this.opening(); // blank function
this.startSlide(true);
}
};

// Close/Hide Menu
// Sets the timer for the menu to close
// Access: public
this.hide = function() {
if(this.timer) this.stopTimer();
this.startTimer();
};

// Actually closes the menu
// Called when the timer runs out
// Access: private
this.closeMenu = function() {
this.stopTimer();
if(this.isOpen && !this.step) {
this.closing(); // blank function
this.startSlide(false);
};
};

// Begins the countdown timer for menu closing
// Access: protected
this.startTimer = function() {
this.timer = setInterval(this.gRef+".closeMenu()", this.hideDelay);
};

// Begins the countdown timer for menu closing
// Access: protected
this.stopTimer = function() {
clearInterval(this.timer);
this.timer = false;
};

// Initiate slide movement
// Called before slide begins
// Access: private
this.startSlide = function(openIt) {
this.isOpen = openIt;
this.slideObj.style.display = ''; //make object visible
this.setVars(); //reset variables incase direction setting has changed
this.accelConst = (this.expanded - this.collapsed) / this.aniLen / this.aniLen; //calculate accelleration
this.startTime = (new Date()).getTime();
this.step = setInterval(this.gRef+'.slide('+openIt+')', this.redrawRate); //begin recursion/animation
};

// Initiate slide movement
// Called when slide is finished
// Access: private
this.endSlide = function() {
//this.slideObj.style.display = 'none'; //hide object
clearInterval(this.step);
this.step = false;
if(this.isOpen) {
eval('this.setClip(' + this.maxOpenClipSetting + ');');
this.opened(); //blank function
} else {
this.slideObj.style.display = 'none';
this.closed(); // blank function
}
};

// Adjust clipping property to simulate movement
// This function is called recursively
// Access: private
this.slide = function(openIt) {
var elapsed = (new Date()).getTime() - this.startTime;
if(elapsed > this.aniLen) {
this.endSlide();
} else {
var t = Math.round(Math.pow(this.aniLen - elapsed, 2) * this.accelConst);

// Use appropriate expression depening on whether openIt is true (open) or false (close)
if(openIt) var clipSetting = this.openClipSetting;
else var clipSetting = this.closeClipSetting;

// Set new clipping data to simulate movement
eval('this.setClip(' + clipSetting + ')');
}
};

// Return old clip properties as array(4) - Array(top, right, bottom, left)
// Access: private
this.getClip = function(){
var obj = this.slideObj;
//Match one setting (i.e. 100): (?:(\d\d*)(?:px)?,?\s*)
//obj.style.clip.match(/(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)(?:(\d\d*)(?:px)?,?\s*)/); //Is there a cleaner way to do this?
//return new Array(RegExp.$1, RegExp.$2, RegExp.$3, RegExp.$4);
obj.style.clip.match(/((\d\d*)(px)?,?\s*)((\d\d*)(px)?,?\s*)((\d\d*)(px)?,?\s*)((\d\d*)(px)?,?\s*)/);
return new Array(RegExp.$2, RegExp.$5, RegExp.$8, RegExp.$11);

};

// Set clip attributes
// Access: private
// Returns: old clip properties as array(4)
this.setClip = function(top, right, bottom, left){
var obj = this.slideObj;
var oldClip = this.getClip();
obj.style.clip = 'rect('+top+'px, '+right+'px, '+bottom+'px, '+left+'px)';
return oldClip;
};

// Get an object's width
// Access: private
this.getWidth = function(){
return this.slideObj.offsetWidth;
};

// Get an object's height
// Access: private
this.getHeight = function(){
return this.slideObj.offsetHeight;
};

// Assign event handler to object
// Access public
this.addEventHandler = function(obj, eventName, funktion, bubbling) {
if(window.attachEvent) { //ie
obj.attachEvent('on'+eventName, funktion);
obj.attachEvent('on'+eventName, funktion);
} else if(window.addEventListener) { //non-ie
obj.addEventListener(eventName, funktion, bubbling);
obj.addEventListener(eventName, funktion, bubbling);
}
};

// Set standard variables based on set direction
// Access: private
this.setVars = function() {
switch(this.dir) {
case 'up':
this.expanded = this.getHeight();
this.collapsed = 0;
this.openClipSetting = 't, this.getWidth(), this.getHeight(), 0';
this.maxOpenClipSetting = '0, this.getWidth(), this.getHeight(), 0';
this.closeClipSetting = 'this.getHeight() - t, this.getWidth(), this.getHeight(), 0';
this.collapseClipSetting = 'this.getHeight(), this.getWidth(), this.getHeight(), 0';
break;
case 'left':
this.expanded = this.getWidth();
this.collapsed = 0;
this.openClipSetting = '0, this.getWidth() - t, this.getHeight(), 0';
this.maxOpenClipSetting = '0, this.getWidth(), this.getHeight(), 0';
this.closeClipSetting = '0, t, this.getHeight(), 0';
this.collapseClipSetting = '0, 0, this.getHeight(), 0';
break;
case 'right':
this.expanded = this.getWidth();
this.collapsed = 0;
this.openClipSetting = '0, this.getWidth(), this.getHeight(), t';
this.maxOpenClipSetting = '0, this.getWidth(), this.getHeight(), 0';
this.closeClipSetting = '0, this.getWidth(), this.getHeight(), this.getWidth() - t';
this.collapseClipSetting = '0, this.getWidth(), this.getHeight(), this.getWidth()';
break;
default: //down
this.expanded = this.getHeight();
this.collapsed = 0;
this.openClipSetting = '0, this.getWidth(), this.getHeight() - t, 0';
this.maxOpenClipSetting = '0, this.getWidth(), this.getHeight(), 0';
this.closeClipSetting = '0, this.getWidth(), t, 0';
this.collapseClipSetting = '0, this.getWidth(), 0, 0';
}
};

// Init
this.setVars();
this.slideObj.style.display = 'none'; //initially hide the menu
if(this.slideObj.style.position != 'absolute') this.slideObj.style.position = 'absolute'; //menu must be absolutely positioned!
eval('this.setClip('+this.collapseClipSetting+')'); //initially collapse the menu

}
/*
Old School Sliding Menu
The original show/hide menu toggler with a few
extra features.
- - - - - - - - - - - - - - - - - - - - - - - -
?2003 by Polychrome Studio, Inc. for Music.com
http://www.polychrome.org/
- - - - - - - - - - - - - - - - - - - - - - - -
*/

function OldSchoolMenu(menuObj)
{

// Public Variables
this.hideDelay = 1000;

this.opening = this.opened = new Function(); // fired when menu is fully open
this.closing = this.closed = new Function(); // fired when menu is fully closed

// Protected variables
this.menuObj = menuObj;

// Private variables
this.isOpen; //stores whether menu is open or closed. boolean.
this.startTime; //time that animation began
this.timer; //stores interval id for menu closing timer

// Global reference to self (used in recursion)
this.gRef = 'OldSchoolMenu_' + (new Date()).getTime();
eval(this.gRef+'=this');

// Show Menu
// Access: public
this.show = function() {
if(this.timer) this.stopTimer();
if(!this.isOpen) this.toggle(true);
};

// Hide Menu
// Sets the timer for the menu to close
// Access: public
this.hide = function() {
if(this.timer) this.stopTimer();
this.startTimer();
};

// Stops timer and closes menu
// Called when the timer runs out
// Access: private
this.closeMenu = function() {
this.stopTimer();
if(this.isOpen) this.toggle(false);
};

// Begins the countdown timer for menu closing
// Access: protected
this.startTimer = function() {
//this.timer = setInterval(this.gRef+".closeMenu()", this.hideDelay);
this.timer = setTimeout(this.gRef+".closeMenu()", this.hideDelay);
};

// Begins the countdown timer for menu closing
// Access: protected
this.stopTimer = function() {
//clearInterval(this.timer);
clearTimeout(this.timer);
this.timer = false;
};

// Actually Hide/Show Menu
// Access: private
this.toggle = function(boolShow) {
this.isOpen = boolShow;
if(boolShow) {
this.menuObj.style.display = '';
this.opened(); //blank function
this.opening(); //blank function
} else {
this.menuObj.style.display = 'none';
this.opened(); //blank function
this.closed(); //blank function
}
};

// Assign event handler to object
// For convenience sake, really
// Access: public
this.addEventHandler = function(obj, eventName, funktion, bubbling) {
if(window.attachEvent) { //ie
obj.attachEvent('on'+eventName, funktion);
} else if(window.addEventListener) { //non-ie
if(!bubbling) bubbling = 'false';
obj.addEventListener(eventName, funktion, bubbling);
} else {
return false;
}
};

// Init
this.menuObj.style.display = 'none'; //initially hide the menu
}
/*

Seeker
- - - - - - - - - - - - - - - - - - - - - - - -
?2004 by Polychrome Studio, Inc. for Music.com
http://www.polychrome.org/
- - - - - - - - - - - - - - - - - - - - - - - -
Useage:

s = new Seeker(obj); // where obj is the object to animate
s.setOrigin(xCoord, yCoord);
s.setTarget(xCoord, yCoord);
s.seek();

// Alternatively you may target an HTML element like so:
s.setOriginObj(obj);
s.setTargetObj(obj);

Also, keep in mind that when the animation starts this
object fires a function called 'onStart()' and a function
called 'onFinish()' when the animation has completed.
Define these functions (externally) to suit your needs.
*/

function Seeker(obj)
{

// Public Variables
this.redrawRate = 10; //refesh rate in milliseconds
this.speed = 20; //amount of pixels to move per step
this.onStep = new Function(); //fired each time animation steps

// Protected Variables
if(obj) this.spriteObj = obj; //object to animate
this.targetX; //ending x coordinate
this.targetY; //ending y coordinate
this.targetW; //width of target
this.targetH; //height of target
this.originX; //object's starting x coordinate
this.originY; //object's starting y coordinate
this.spriteW; //width of sprite obj
this.spriteH; //height of sprite obj
this.args; //stores arguments passed in various places

// Private Variables
this.stepCount = 0; //records the current animation step number

// Global Reference to This Object (used in recursion)
this.gRef = 'Seeker_' + (new Date()).getTime();
eval(this.gRef+'=this');

// Sets the X and Y starting coordinates
// Access: Protected
this.setOrigin = function(x, y){
this.originX = x;
this.originY = y;
this.spriteObj.style.left = this.originX+'px';
this.spriteObj.style.top = this.originY+'px';
};

// Sets the origin object
// Specifically specifies origin object centerpoint
// Access: Protected
this.setOriginObj = function(obj){
var x = this.getObjX(obj),
y = this.getObjY(obj),
w = this.getObjWidth(obj),
h = this.getObjHeight(obj);
this.originX = x+w/2 - this.spriteW/2;
this.originY = y+h/2 - this.spriteH/2;
this.originW = w;
this.originH = h;
};

// Sets the target box
// Access: public
this.setTarget = function(x, y, width, height){
this.targetX = x;
this.targetY = y;
this.targetW = width;
this.targetH = height;
};

// Sets the target object
// Specifically specifies object centerpoint
// Access: public
this.setTargetObj = function(obj){
var x = this.getObjX(obj),
y = this.getObjY(obj),
w = this.getObjWidth(obj),
h = this.getObjHeight(obj);
this.targetX = x+w/2 - this.spriteW/2;
this.targetY = y+h/2 - this.spriteH/2;
this.targetW = w;
this.targetH = h;
};

// User-friendly function to begin the animation
// Pass a object (such as "this") to be passed to
// onStart(), onFinish(), and onStep() if you'd like
// Access: public
this.seek = function() {
if(arguments) this.args = arguments; //store arguments to pass to onFinish() later
this.onStart(arguments); // Empty function fired, arguments to seek() passed
this.startSeek();
};

// Initializes and starts the animation
// Access: private
this.startSeek = function() {
var distX = (this.targetX - this.originX), distY = (this.targetY - this.originY);

// If x-distance is farther find y speed
if( Math.abs(distX) > Math.abs(distY) ) {
this.steps = Math.abs(distX / this.speed);
this.rateX = Math.abs(this.speed);
this.rateY = Math.abs(distY / this.steps);
}
// If y-distance is farther find x speed
else {
this.steps = Math.abs(distY / this.speed);
this.rateX = Math.abs(distX / this.steps);
this.rateY = Math.abs(this.speed);
}

// Begin animation loop
this.stepCount = 0;
this.step = setInterval(this.gRef+'.seekLoop()', this.redrawRate); //begin recursion/animation
};

// Called when end of animation is reached
// Access: private
this.endSeek = function() {
clearInterval(this.step);
this.onFinish(this.args); // Empty Function
};

// Reposition (animate) object
// This function is called recursively to simulate motion
// Access: private
this.seekLoop = function() {
this.onStep(this.args); // Empty function

if(this.stepCount > this.steps-1) {
this.endSeek();
} else {
this.stepCount++;
var tX = this.rateX * this.stepCount,
tY = this.rateY * this.stepCount,
spriteXHalf = this.spriteH/2,
spriteYHalf = this.spriteW/2;

// Quadrant I
if( (this.originX > this.targetX) && (this.originY < this.targetY) ) {
this.spriteObj.style.left = Math.round(this.originX - tX) + 'px';
this.spriteObj.style.top = Math.round(this.originY + tY) + 'px';
}
// Quadrant II
else if( (this.originX > this.targetX) && (this.originY > this.targetY) ) {
this.spriteObj.style.left = Math.round(this.originX - tX) + 'px';
this.spriteObj.style.top = Math.round(this.originY - tY) + 'px';
}
// Quadrant III
else if( (this.originX < this.targetX) && (this.originY > this.targetY) ) {
this.spriteObj.style.left = Math.round(this.originX + tX) + 'px';
this.spriteObj.style.top = Math.round(this.originY - tY) + 'px';
}
// Quadrant IV
else {
this.spriteObj.style.left = Math.round(this.originX + tX ) + 'px';
this.spriteObj.style.top = Math.round(this.originY + tY) + 'px';
}

}

};

// Get an object's X coordinate
this.getObjX = function(obj) {
return (obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+this.getObjX(obj.offsetParent));
}

// Get an object's Y coordinate
this.getObjY = function(obj) {
return (obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+this.getObjY(obj.offsetParent));
}

// Get an object's width
this.getObjWidth = function(obj) {
return obj.offsetWidth;
}

// Get an object's height
this.getObjHeight = function(obj) {
return obj.offsetHeight;
}

// Get sprite's width and height centerpoints
this.spriteW = this.getObjWidth(this.spriteObj);
this.spriteH = this.getObjHeight(this.spriteObj);

// Assign's IE's event elements to the stadard ones
// Access: private
this.fixE = function(e) {
if(!e) var e = window.event;
if(!e.target && e.srcElement) e.target = e.srcElement;
return e;
}

}

// Get Mouse's XY Coordinates
// NOT CURRENTLY USED!
Seeker.prototype.getMouseXY = function(e) {
if(!e) e = window.event;
if(e.pageX && e.pageY) { // Non-IE
this.mouseX = e.pageX;
this.mouseY = e.pageY;
} else if(e.clientX && e.clientY) { // Presumably IE
var x = e.clientX, y = e.clientY;
if(document.all) { // This should be an IE-Sniff, really

// IE, when using a DOCTYPE remaps certain document.body values
// to document.documentElement for confusion's sake.
if (document.compatMode && document.compatMode != "BackCompat") {
x += document.documentElement.scrollLeft;
y += document.documentElement.scrollTop;
} else {
x += document.body.scrollLeft;
y += document.body.scrollTop;
}

}
this.mouseX = x;
this.mouseY = y;
} else {
return false;
}
};/*
Functions for Spillies
*/

// Toggle spilly display
// Pass name of spilly to open
function spill(baseName) {
if(document.getElementById) {
var obj = document.getElementById(baseName);
if(obj.className.match(/closed/)) obj.className = obj.className.replace(/closed/, 'open');
else obj.className = obj.className.replace(/open/, 'closed');
}
}

// Open all spillies, close all spillies
// Pass true to open, false to close
function spillAll(boolOpen) {
if(document.getElementsByTagName) {
var divs = document.getElementsByTagName('div');
for(var i=0; i<divs.length; i++) {
if( boolOpen && divs[i].className.match(/(^(closed)$)|([^_]\s?closed\s?)/) )
divs[i].className = divs[i].className.replace(/closed/, 'open');
else if(!boolOpen && divs[i].className.match(/(^(open)$)|([^_]\s?open\s?)/) )
divs[i].className = divs[i].className.replace(/open/, 'closed');
}
}
}
/*

Browser/Platform Sniffer
- - - - - - - - - - - - - - - - - - - - -
?2004 by Polychrome Studio for Music.com
http://www.polychrome.org/
- - - - - - - - - - - - - - - - - - - - -

Note: This object will crash IE3Mac, as it should.

This code handles data and data structures.

Notes:

Data structures look like:

ratings = [
['43430985745090743545', 5],
['98339847329847346364', 3],
['09809892324234343244', 1]
];
flags = [
['43430985745090743545', 'S'],
['98339847329847346364', 'S'],
['09809892324234343244', 'P']
];
permissions = [
['43430985745090743545', 1],
['98339847329847346364', 8],
['09809892324234343244', 9]
];

Also note that:

c = inaccurate
p = inacppropriate
s = spam

function handleDataStructures() {

if(document.getElementById) {

var i, j,
nodes,
flag = {'C':'inaccurate', 'P':'inappropriate', 'S':'spam'};

var setRating = function(node, data) {
if(node.firstChild.nodeValue == data.toString()) {
node.className = 'rated';
}
}

var setFlag = function(node, data) {
if(node.firstChild.nodeValue.toLowerCase() == flag[data.toString().toUpperCase()] ) {
node.className = 'flagged';
}
}

var setPermission = function(node, data) {
if((data & 2) > 0)
{
node.parentNode.className = 'editshown';
}

}

if(permissions && typeof permissions == 'object') {

for(i in permissions)
{

nodeScan(permissions[i], setPermission);
}

}

}

};
// Browser Sniff
itis = new SniffLite();

// Create Init Object
init = new Object;

// Initiate Scratch Menu
init.slidingMenu = function() {

// Generate the actual Scratch List
sl = new ScratchList();

var sButton = document.getElementById('scratchButton'),
sClip = document.getElementById('scratchClip'),
sMenu = document.getElementById('scratchMenu'),
scratchBody = document.getElementById('scratchBody');

// Initiate appropriate code depending on browser/platform
if(itis.win && (itis.ie || itis.opera)) {
sm = new SlidingMenu(sClip, sMenu, 'down');
sm.hideDelay = 500;
sm.aniLen = 150;
} else if(itis.moz || itis.kmeleon) {
sm = new RollingMenu(sClip, 'down');
sm.hideDelay = 500;
sm.aniLen = 150;
} else {
sm = new OldSchoolMenu(sClip);
sm.hideDelay = 500;
}

if(itis.mac && itis.ie) scratchBody.style.left = '-1000px';

// Fired right before scratch menu begins opening
sm.opening = function() {
if(sClip.style.visibility != 'visible') sClip.style.visibility = 'visible'; //(scratch menu initial flash bugfix)
if(itis.mac && itis.ie) scratchBody.style.left = '0px';
};

// Fired right after scratch menu has closed
sm.closed = function() {
if(itis.mac && itis.ie) scratchBody.style.left = '-1000px';
};

}

// Initiate Flying Plus Signs
init.flyingPlus = function() {

var button = document.getElementById('scratchButton');
var flyingPlus = newChild(document.body, 'div', 'id', 'flyingPlus0', 'className', 'flyingPlus', 'style.visibility', 'hidden', 'innerHTML', '[+]');

// Before Flying Starts
Seeker.prototype.onStart = function(args) {
var initObj = args[0]; //initiating object
this.seeking = true;
if(initObj.innerHTML == '[+]') {
initObj.innerHTML = '[-]';
initObj._justChanged = true;
this.setOriginObj(initObj);
this.setTargetObj(button);
this.targetX -= 60; //asthetic adjustment
} else {
this.setOriginObj(button);
this.originX -= 60; //asthetic adjustment
this.setTargetObj(initObj);
}

// move the plus sign to the starting location (bugfix)
this.spriteObj.style.left = Math.round(this.originX)+'px';
this.spriteObj.style.top = Math.round(this.originY)+'px';

this.spriteObj.style.display = '';
};

// After flying ends
Seeker.prototype.onFinish = function(args) {

var initObj = args[0], add = true;

if(initObj.innerHTML == '[-]' && !initObj._justChanged) add = false;

// Flyingplus reset commands
if(!add) initObj.innerHTML = '[+]';
initObj._justChanged = false;
this.spriteObj.style.display = 'none';
this.seeking = false;

if(add) { //add to scratch list
var list = args[3] ? sl.userList : sl.musicList;
if(!sl.duplicateFound(list, args[2])) {
args[3] ? sl.addUsers(args[1], args[2], true) : sl.addMusic(args[1], args[2], true);
}
} else { //remove from scratch list
args[3] ? sl.removeUsers(args[2], true) : sl.removeMusic(args[2], true);
}

// Update other identical plus signs in page
updateMarks(initObj.innerHTML, args[2]);

};

// Create New Flying Plus object
fp = new Seeker(flyingPlus);
flyingPlus.style.visibility = 'visible';
flyingPlus.style.display = 'none';

}

// Called after page has been loaded via the <BODY> tag's onLoad attribute.
// (Can not be called via addEventListender()/attachEvent() because of ANOTHER an IE5Mac limitation)
function onLoad() {

init.slidingMenu();
init.flyingPlus();
sl.loadData(document.cookie); //temporary--rtl should call this function
var listSize = sl.listSize();
if(listSize > 0 && document.getElementById("merge_msg"))
{
var mm = document.getElementById("merge_msg");
mm.className = 'mergeshown';
}

if(document.cookie.indexOf("lh=") >= 0) {
var dn = /dn=([^;$]+)/.exec(document.cookie)[1].replace(/\+/, " ");
document.getElementById('welcome_display_name').firstChild.nodeValue = dn;
document.getElementById('subwelcome_display_name').firstChild.nodeValue = dn;

if(is_static)
{
handleDataStructures();
}
}

// Init Marketplace Random Images
if(typeof randomMascot != 'undefined') randomMascot();

};

</script>

</head>
<body onload="onLoad()" class="marketHome">

</body>
</html>

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
//소스 출처: http://www.script.ne.kr - Mlang
function MlangMouseMemu(siche_this){
sub_1.style.display="none";
siche_this.style.display="block";

// 더 메뉴을 추가하려면
//sub_2.style.display="none";
// 형식대로 넣은후 body 부분 div id=sub_2로 호출하십시요
}
function MlangMouseMemu_Out(siche_this){
sub_1.style.display="none";
siche_this.style.display="none";
}
</SCRIPT>
</HEAD>

<div id=sub_1 style="display:none;width:229;height:15;">
<table width=229 height=15 valign=top cellspacing=0 cellpadding=0 border=0>
<tr>
<td width="54" onmouseout="MlangMouseMemu_Out(sub_1);">
xptmxm dlqslek......................................
</table>
</div>

</div>
</BODY>
</HTML>

<head>
<style>
a.quick:link {font-family:돋움; font-size:11px; color:#807D77; text-decoration:none; line-height:14px; letter-spacing:-1;}
a.quick:visited {font-family:돋움; font-size:11px; color:#807D77; text-decoration:none; line-height:14px; letter-spacing:-1;}
a.quick:active {font-family:돋움; font-size:11px; color:#807D77; text-decoration:none; line-height:14px; letter-spacing:-1;}
a.quick:hover {font-family:돋움; font-size:11px; color:#392F1F; text-decoration:none; line-height:14px; letter-spacing:-1;}
</style>

<body>

</body>

<html>
<head>
<title>script.ne.kr-마우스오버시나오는 반투명 팝업메뉴</title>

var dofade=true;

var centertext=false;

var xoffset=1; // (마우스커서를기점으로)팝업 메뉴창이 뜨는 width 위치

var yoffset=5; // 마우스커서를기점으로)팝업 메뉴창이 뜨는 height 위치

var mousefollow=false;

var hideDelay=3; // 메뉴창에 마우스를 대면 반투명으로 나오는 시간

function altProps(){
this.w3c=(document.getElementById)?true:false;
this.ns4=(document.layers)?true:false;
this.ie4=(document.all && !this.w3c)?true:false;
this.ie5=(document.all && this.w3c)?true:false;
this.ns6=(this.w3c && navigator.appName.indexOf("Netscape")>=0 )?true:false;
this.w_y=0;
this.w_x=0;
this.navtxt=null;
this.boxheight=0;
this.boxwidth=0;
this.ishover=false;
this.ieop=0;
this.op_id=0;
this.oktomove=false;
this.dy=0;
}

var AT=new altProps();

function toggle_centertext(){
centertext=!centertext;
}

function toggle_mousefollow(){
mousefollow=!mousefollow;
}

function toggle_dofade(){
dofade=!dofade;
if(!dofade)AT.ieop=100;
}

function getwindowdims(){
AT.w_y=(AT.ie5||AT.ie4)?document.body.clientHeight:window.innerHeight;
AT.w_x=(AT.ie5||AT.ie4)?document.body.clientWidth:window.innerWidth;
}

function getboxwidth(){
if(AT.ns4)AT.boxwidth=(AT.navtxt.document.width)? AT.navtxt.document.width : AT.navtxt.clip.width;
else if(AT.ie4)AT.boxwidth=(AT.navtxt.style.pixelWidth)? AT.navtxt.style.pixelWidth : AT.navtxt.offsetWidth;
else AT.boxwidth=(AT.navtxt.style.width)? parseInt(AT.navtxt.style.width) : parseInt(AT.navtxt.offsetWidth);
}

function getboxheight(){
if(AT.ns4)AT.boxheight=(AT.navtxt.document.height)? AT.navtxt.document.height : AT.navtxt.clip.height;
else if(AT.ie4)AT.boxheight=(AT.navtxt.style.pixelHeight)? AT.navtxt.style.pixelHeight : AT.navtxt.offsetHeight;
else AT.boxheight=parseInt(AT.navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(AT.ns4)AT.navtxt.moveTo(x,y);
else{
AT.navtxt.style.left=x+'px';
AT.navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(AT.ie5||AT.ie4)return document.body.scrollTop;
else return window.pageYOffset;
}

function getpagescrollx(){
if(AT.ie5||AT.ie4)return document.body.scrollLeft;
else return window.pageXOffset;
}

function writeindiv(text){
if(AT.ns4){
AT.navtxt.document.open();
AT.navtxt.document.write(text);
AT.navtxt.document.close();
}
else AT.navtxt.innerHTML=text;
}

function hideAlttxt(){
if(AT.ns4)AT.navtxt.visibility="hide";
else{
AT.navtxt.style.display="none";
AT.navtxt.style.visibility="hidden";
}
movenavtxt(-AT.boxwidth-10,0);
writeindiv('');
}

function incropacity(){
if(AT.ieop<=100){
AT.ieop+=7;
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity="+AT.ieop+")";
if(AT.ns6)AT.navtxt.style.MozOpacity=AT.ieop/100;
}else clearInterval(AT.op_id);
}

function moveobj(evt){
mx=(AT.ie5||AT.ie4)?event.clientX:evt.pageX;
my=(AT.ie5||AT.ie4)?event.clientY:evt.pageY;
if(AT.ishover && AT.oktomove){
margin=(AT.ie4||AT.ie5)?5:25;
if(AT.ns6)if(document.height+27-window.innerHeight<0)margin=15;
if(AT.ns4)if(document.height-window.innerHeight<0)margin=10;
if(AT.ns4||AT.ns6)mx-=getpagescrollx();
if(AT.ns4)my-=getpagescrolly();
xoff=mx+xoffset;
yoff=(my+AT.boxheight+yoffset-((AT.ns6)?getpagescrolly():0)>=AT.w_y)? -5-AT.boxheight-yoffset: yoffset;
movenavtxt( Math.min(AT.w_x-AT.boxwidth-margin , Math.max(2,xoff))+getpagescrollx(), my+yoff+((!AT.ns6)?getpagescrolly():0));
if(!mousefollow)AT.oktomove=false;
}}

</head>
<body>

<p align=center><b>마우스를 가만대고 있으면 반투명 >> 정상창으로 나옵니다</b></fot></p>

<a href="javascript:void(0)" onmouseover="writetxt('<p> ▶ <a href=\'http://www.pu.to\' target=\'_blank\'>메뉴-------1</a></p><p> ▶ <a href=\'http://www.script.ne.kr\' target=\'_self\'>메뉴-------2</a></p><p> ▶ <a href=\'#\' onClick="javascript:alert(\'사랑해...홍영애\');">메뉴-------3</a>< /p><p> ▶ <a href=\'#\' onClick="javascript:window.open(\'http://www.script.ne.kr\', \'Mlang\',\'width=650,height=500,top=0,left=0,statusbar=no,resizable=yes, scrollbars=no,toolbar=no\');">메뉴-------3</a></p>'); return true" onmouseout="writetxt(0)">메뉴로 호출할때</a>

<BR><BR>

<a href="javascript:void(0)" onmouseover="writetxt('<img src=\'http://www.script.ne.kr/img/logo/girl-good.jpg\' border=0>');" onmouseout="writetxt(0)">이미지 호출할때</a>

<a href="javascript:void(0)" onmouseover="writetxt('흐흐흐흐 죽이시졍..... *^^*<br>위에 메뉴로 호출할때 보시면<br>링크형식을 다 틀리게 하였습니다.<br>그건 알아서 이용하시고욤 해해^^<br>script 구문이 너무기시면 js로 만들어가 호출하시기 바랍니다,,.'); return true" onmouseout="writetxt(0)">설명창으로 호출할때</a>

</p>

</body>
</html>

이온디 유한회사 | 사업자번호 : 405-86-01061 | 통신판매신고 : 제2018-대구동구-0767호 [사업자확인]
주소. 대구광역시 동구 안심로16길 71, 5층 502호 / 전화. 0507-1433-0311