Плавно проявляющаяся всплывающая подсказка

P

phpMaster

Для получения плавно проявляющейся всплывающей подсказки, для начала вставить вверху странички между тегами<head></head>стиль всплывающей подсказки:
HTML:
<style type="text/css">
.demo_popup {
border: solid 1px #333;
font-family: Tahoma;
font-size: 12px;
display: none;
position: absolute;
width: 300px;
z-index: 60;
background: #ddd;
padding: 5px;
text-align: center;
top: 490px;
left: 550px;
}
</style>
Далее добавьте на свою страничку сам скрипт, который реализует плавно проявляющуюся всплывающую подсказку:
Код:
<script type="text/javascript">
var fade_opacity = new Array();
var fade_timer = new Array();
var fade_interval = 100;

function fade(obj,d) {
var object = document.getElementById(obj);
if((fade_timer[obj])||(d&&object.style.display!='block')||
        (!d&&object.style.display=='block')) {
if(fade_timer[obj])
clearInterval(fade_timer[obj]);
else
if(d) fade_opacity[obj] = 0;
else fade_opacity[obj] = 9;
object.style.opacity = "."+fade_opacity[obj].toString();
object.style.filter = "alpha(opacity="+fade_opacity[obj].toString()+"0)";
if(d) {
object.style.display = 'block';
fade_timer[obj] = setInterval('fade_animation("'+obj+'",1);',fade_interval);
} else
fade_timer[obj] = setInterval('fade_animation("'+obj+'",-1);',fade_interval);
}}

function fade_animation(obj,i) {
var object = document.getElementById(obj);
fade_opacity[obj] += i;
object.style.opacity = "."+fade_opacity[obj].toString();
object.style.filter = "alpha(opacity="+fade_opacity[obj].toString()+"0)";
if((fade_opacity[obj]=='9')|(fade_opacity[obj]=='0')) {
if(fade_opacity[obj]=='0')
object.style.display = 'none';
else {
object.style.opacity = "1";
object.style.filter = "alpha(opacity=100)";
}
clearInterval(fade_timer[obj]);
delete(fade_timer[obj]);
delete(fade_timer[obj]);
delete(fade_opacity[obj]);
} }
</script>
Ну и далее остается описать объекты, при наведении на которые курсора мышки будет проявляться наша всплывающая подсказка и сами подсказки. Делать это следует так:
HTML:
<div align="center">
<span onMouseOver="fade('demo_hint1',true);" onMouseOut="fade('demo_hint1',false);">
<b>absolute</b>
</span>

<span onMouseOver="fade('demo_hint2',true);" onMouseOut="fade('demo_hint2',false);">
<b>fixed</b>
</span>
</div>

<div id="demo_hint1" class="demo_popup">
Указывает, что элемент абсолютно позиционирован, при этом другие элементы
отображаются на веб-странице словно абсолютно позиционированного элемента и нет.
</div>

<div id="demo_hint2" class="demo_popup">
По своему действию это значение близко к absolute, но в отличие от него
привязывается к указанной свойствами left, top, right и bottom точке на
экране и не меняет своего положения при прокрутке веб-страницы.
</div>
 

Rubrika

Участник
Хороший код, мне понравился, позволил убрать нагромождение текста на странице и выдавать нужную инфу при наведении.)
 
Сверху