Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<title>Меню Горизонтальное меню из линков с применением фильтра fade и скрипта ie-css3.htc для обрамления</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
*{margin:0;padding:0;}
html,body{margin:0;padding:0;}
body{background:#fff;min-width:400px;font:normal 13px Tahoma, Verdana, Arial, sans-serif;color:#000;}
#topmenu{height:36px;margin:10px;text-align:center;clear:both;}
#topmenu ul{list-style:none;margin:0;padding:0;}
#topmenu ul li{list-style-type:none;background:red;padding:2;margin:4}
#topmenu li{width:24px;height:24px;float:left;position: relative;
text-align: center;font-weight: bold;
-moz-border-radius: 8px;-webkit-border-radius: 8px;
border-radius: 6px;-moz-box-shadow: 4px 4px 4px #FF0000;
-webkit-box-shadow: 4px 4px 4px #FF0000;box-shadow: 4px 4px 4px #CCC;
behavior: url(ie-css3.htc);border: 1px solid #FF0000;}
#topmenu a{width:24px;height:20px;cursor:pointer;background:#eba300;color:#fff;
font:bold 12px Tahoma, Verdana, Arial, sans-serif;text-decoration:none;
float:left;display:block;padding:2px 0 2px 0;border:1px solid #eba300;border-right:0;}
#topmenu > ul a {width:auto;}
#topmenu a {float:none;}
</style>
<script type="text/javascript">
function fade(sElemId,sRule,bBackward){if(!document.getElementById(sElemId))return;var aRuleList=sRule.split(/\s*,\s*/);for(var j=0;j<aRuleList.length;j++){sRule=aRuleList[j];if(!fade.aRules[sRule])continue;var i=0;if(!fade.aProc[sElemId])
{fade.aProc[sElemId]={};}
else if(fade.aProc[sElemId][sRule])
{i=fade.aProc[sElemId][sRule].i;clearInterval(fade.aProc[sElemId][sRule].tId);}
if((i==0&&bBackward)||(i==fade.aRules[sRule][3]&&!bBackward))continue;fade.aProc[sElemId][sRule]={'i':i,'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")',fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)};}}
fade.aProc={};fade.aRules={};fade.run=function(sElemId,sRule)
{fade.aProc[sElemId][sRule].i+=fade.aProc[sElemId][sRule].bBackward?-1:1;var finishPercent=fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3];var startPercent=1-finishPercent;var aRGBStart=fade.aRules[sRule][0];var aRGBFinish=fade.aRules[sRule][1];document.getElementById(sElemId).style[fade.aRules[sRule][2]]='rgb('+Math.floor(aRGBStart['r']*startPercent+aRGBFinish['r']*finishPercent)+','+Math.floor(aRGBStart['g']*startPercent+aRGBFinish['g']*finishPercent)+','+Math.floor(aRGBStart['b']*startPercent+aRGBFinish['b']*finishPercent)+')';if(fade.aProc[sElemId][sRule].i==fade.aRules[sRule][3]||fade.aProc[sElemId][sRule].i==0)clearInterval(fade.aProc[sElemId][sRule].tId);}
fade.back=function(sElemId,sRule){fade(sElemId,sRule,true);};fade.addRule=function(sRuleName,sFadeStartColor,sFadeFinishColor,sCSSProp,nMiddleColors,nDelay)
{fade.aRules[sRuleName]=[fade.splitRGB(sFadeStartColor),fade.splitRGB(sFadeFinishColor),fade.ccs2js(sCSSProp),nMiddleColors||50,nDelay||1];};fade.splitRGB=function(color){var rgb=color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g);for(var i=0;i<3;i++)rgb[i]=parseInt(rgb[i],16);return{'r':rgb[0],'g':rgb[1],'b':rgb[2]};};fade.ccs2js=function(prop){var i;while((i=prop.indexOf("-"))!=-1)prop=prop.substr(0,i)+prop.substr(i+1,1).toUpperCase()+prop.substr(i+2);return prop;};
</script>
<script type="text/javascript">
fade.addRule('fontfade',"#fff","#eba300","color", 80, 1);
fade.addRule('orfade',"#eba300","#fff8de","background-color", 80, 1);
</script>
</head>
<body>
<div id="topmenu">
<ul id="nav">
<li><div class="im"><a id="item1" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=А">А</a></div></li>
<li><div class="im"><a id="item2" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Б">Б</a></div></li>
<li><div class="im"><a id="item3" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=В">В</a></div></li>
<li><div class="im"><a id="item4" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Г">Г</a></div></li>
<li><div class="im"><a id="item5" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Д">Д</a></div></li>
<li><div class="im"><a id="item6" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Е">Е</a></div></li>
<li><div class="im"><a id="item7" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=З">З</a></div></li>
<li><div class="im"><a id="item8" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=И">И</a></div></li>
<li><div class="im"><a id="item9" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=К">К</a></div></li>
<li><div class="im"><a id="item10" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Л">Л</a></div></li>
<li><div class="im"><a id="item11" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=М">М</a></div></li>
<li><div class="im"><a id="item12" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')"  href="?char=Н">Н</a></div></li>