Плавно проявляющаяся всплывающая подсказка
В данной теме мы рассмотрим пример JavaScript кода, который позволит Вам создать плавно проявляющуюся всплывающую подсказку в нужном месте Вашей странички при наведении курсора мышки на указанные объекты.
Данный скрипт может быть необходим в тех случаях, если потребуется показывать некие подсказки (подписи или комментарии к изображениям и т.д.) в определенном месте Вашей странички при наведении курсора мышки на интересующие объекты.
Для того чтобы понять о каком скрипте идет речь, обратите внимание на расположенное ниже окошко с надписью "Подсказка" и текст, расположенный чуть ниже данного окошка.
Попробуйте поочередно наводить и убирать курсор мышки на разные выделенные фразы под окошком, и Вы увидите, как в окошке будут появляться подсказки.
Для получения точно таких же плавно проявляющихся всплывающих подсказок, для начала вставьте вверху странички между тегами <head></head> стиль блока, в котором будут отображаться подсказки и стили всплывающих подсказок:
<style type="text/css">
.demo_div {
width: 350px;
height: 120px;
margin: 20px auto;
text-align: center;
background-color: #DDFFDD;
border: 1px solid #E3E3E3;
}
.demo_popup {
border: solid 1px #333333;
font-family: Tahoma;
font-size: 12px;
display: none;
position: absolute;
width: 300px;
z-index: 60;
background: #DDDDDD;
padding: 5px;
margin: 10px 20px;
text-align: center;
}
</style>Далее добавьте на свою страничку код скрипта, который осуществит всю работу по реализации плавного проявления всплывающих подсказок:
<script type="text/javascript">
var fade_opacity = new Array();
var timer = new Array();
var interval = 90;
var dir = 1;
function fade(hint, d) {
var object = document.getElementById(hint);
if (timer[hint]) clearInterval(timer[hint])
else if (d) fade_opacity[hint] = 0
else fade_opacity[hint] = 9;
object.style.opacity = "." + fade_opacity[hint].toString();
object.style.filter = "alpha(opacity = " + fade_opacity[hint].toString() + "0)";
if (d) {
object.style.display = "block";
dir = 1;
}
else dir = -1;
timer[hint] = setInterval('fade_animation("' + hint + '",' + dir + ');', interval);
}
function fade_animation(obj, i) {
var unit = document.getElementById(obj);
fade_opacity[obj] += i;
unit.style.opacity = "." + fade_opacity[obj].toString();
unit.style.filter = "alpha(opacity = " + fade_opacity[obj].toString() + "0)";
if (fade_opacity[obj]<=0) {
fade_opacity[obj] = 0;
unit.style.display = "none";
clearInterval(timer[obj]);
}
if (fade_opacity[obj]>=9) {
unit.style.opacity = 1;
unit.style.filter = "alpha(opacity=100)";
clearInterval(timer[obj]);
}
}
</script>Далее остается описать объекты, при наведении на которые курсора мышки будут проявляться сделанные нами всплывающие подсказки и сами подсказки. Делать это следует так:
<div class="demo_div">
<div id="hint1" class="demo_popup">
Указывает, что элемент абсолютно позиционирован, при этом другие элементы
отображаются на веб-странице словно абсолютно позиционированного элемента и нет.
</div>
<div id="hint2" class="demo_popup">
По своему действию это значение близко к absolute, но в отличие от него
привязывается к указанной свойствами left, top, right и bottom точке на
экране и не меняет своего положения при прокрутке веб-страницы.
</div>
</div>
<span onMouseOver="fade('hint1',1);" onMouseOut="fade('hint1',0);">absolute</span>
<span onMouseOver="fade('hint2',1);" onMouseOut="fade('hint2',0);">fixed</span>Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.