Kb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Окно доп. (блок) открывается постепенно с анимацией при наведении на текст</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script> var fadeOpacity=new Array();var fadeTimer=new Array();var fadeInterval=100;function fade(o,d){var obj=document.getElementById(o);if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block')){if(fadeTimer[o]) clearInterval(fadeTimer[o]);else if(d)fadeOpacity[o]=0;else fadeOpacity[o]=9;obj.style.opacity="."+fadeOpacity[o].toString();obj.style.filter="alpha(opacity="+fadeOpacity[o].toString()+"0)";if(d){obj.style.display='block';fadeTimer[o]=setInterval('fadeAnimation("'+o+'",1);',fadeInterval);}else fadeTimer[o]=setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);}} function fadeAnimation(o,i){var obj=document.getElementById(o);fadeOpacity[o]+=i;obj.style.opacity="."+fadeOpacity[o].toString();obj.style.filter="alpha(opacity="+fadeOpacity[o].toString()+"0)";if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0')){if(fadeOpacity[o]=='0') obj.style.display='none';else{obj.style.opacity="1";obj.style.filter="alpha(opacity=100)";} clearInterval(fadeTimer[o]);delete(fadeTimer[o]);delete(fadeTimer[o]);delete(fadeOpacity[o]);}} </script> <style type = "text/css"> .demoPopup { border: solid 1px #333; font-family: Tahoma; font-size: 12px; display: none; position: absolute; width: 300px; z-index: 60;} .demoPopuptitle {background: blue;color: white; font-weight: bold; height: 15px; padding: 5px;} .demoPopupbody {background: #ddd; padding: 5px; text-align: center;} #demoPopup1 { top: 100px; left: 50px;} #demoPopup2 { top: 100px; left: 400px;} </style> </head> <body> <span onmouseover="fade('demoPopup1',true);" onmouseout="fade('demoPopup1',false);">наведи курсор</span> <div id="demoPopup1" class="demoPopup"> <div class="demoPopuptitle">Fade Popup 1</div> <div class="demoPopupbody"> <p>Press close to fade out this popup</p> <img src=http://www.03www.su/pic/001.jpg width=50> </div> </div> <style type="text/css">#empty, #footer { height: 32px; }#footer { bottom: 0; left: 0; margin-bottom:10px; position: absolute; width: 100%; display:block; padding-left:360px}</style> <script>var i=1; function addtext(el){a=el.parentNode;a.innerHTML=a.innerHTML+'<h1>'+(i++)+'</h1>test<br>test';}</script> <div id="empty"> </div><div id="footer"><font style="font-size:12px;color:#CC6600;font-family:Arial;" onclick="location.href='http://www.03www.su/5.php'" title="для писем" target=_blank> Библиотека JAVASCRIPT 1997- <script src="http://www.03www.ru/god.js"></script> Дизайн и сопровождение © SE@RCHER</font></div> </body> </html>
