Уважаемые спецы!
В браузер выводится большая таблица.
Каждая строка содержит img-ссылку ("?"), при нажатии на которую появляется подсказка.
Проблема у меня в том, что при вызове подсказок с нижних позиций (после прокрутки экрана) подсказки эти не видны, так как появляются в начале страницы.
Как сделать, чтобы подсказки появлялись в зоне видимости, я не знаю. Очень прошу Вашей помощи.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всплывающие подсказки</title>
<script type="text/javascript">
//понадобится 4 функции
// show, чтобы показать всплывающее окно
function show(evt, id) {
var evt = evt || window.event;
var o = evt.target || evt.srcElement;
var f = document.getElementById('cur_popup_note');
if (f == null) {
f = document.createElement('div');
f.setAttribute('id', 'cur_popup_note');
f.setAttribute('style',
'progid:DXImageTransform.Microsoft.Alpha(opacity=100); ' +
'opacity: 1; display: block; top: 0px; left: 0px;' +
'width:200px; height:auto;');
f.setAttribute('class', 'popup');
document.body.appendChild(f);
}
f.opacityFilter = 0;
f.innerHTML = '<img src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/img/x.jpg" height="13" width="13" border="0" id="x_image" ' + 'style="cursor:pointer;float:right;" onclick="hide();">' + '<div style="padding: 10px">' + document.getElementById(id).innerHTML + '</div>';
f.className = 'popup_active';
f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
f.style.opacity = f.opacityFilter;
f.style.display = 'block';
var o_coords = getPosition(o);
var f_coords = getPosition(f);
var calculatedTop = (f.offsetTop + (o_coords.top - f_coords.top));
var calculatedLeft = (f.offsetLeft + (o_coords.left - f_coords.left));
if (calculatedTop + f.offsetHeight > document.body.offsetHeight)
calculatedTop = document.body.offsetHeight - f.offsetHeight;
if (calculatedLeft + 200 > document.body.offsetWidth)
calculatedLeft = document.body.offsetWidth - 220;
f.style.top = calculatedTop + 'px';
f.style.left = calculatedLeft + 'px';
window.setTimeout('animate()', 50);
evt.cancelBubble = true;
return false;
}
// hide, чтобы спрятать его
function hide() {
var div = document.getElementById('cur_popup_note');
if (div != null) {
div.className = 'footnote_new';
div.style.display = 'none';
}
return false;
}
// animate, чтобы управлять процессом "всплывания"
function animate() {
var f = document.getElementById('cur_popup_note');
f.opacityFilter += 0.05;
f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
f.style.opacity = f.opacityFilter;
if (f.opacityFilter < 1) window.setTimeout('animate()', 50);
}
// служебная функция getPosition, которая поможет вычислить положение объектов на странице.
function getPosition(offsetTrail) {
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {
left: offsetLeft,
top: offsetTop
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img border="0" onclick="return show(event, 'note1')"
src="http://../images/img/q.jpg" alt=""
title="Нажмите здесь для помощи" style="cursor: pointer;">
<div id='note1' style='display: none'>
Всплывающий текст подсказки
</div>
</td>
</tr>
.....
</table>
</body>
</html>