5W site logo 5W - мой домашний сайт-блог с картинками, кино и плюшками.

css-popup-text.txt

Делал сам, но за основу брал скрипт определения положения курсора на экране.

Состоит он из трех частей, JavaScript кода, HTML кода и CSS кода.

JavaScript код:
<script language="JavaScript">
<!--
// Пишем функцию, определяющую координаты
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
// Простая проверка
// С помощью document.write выведем координаты прямо в окно браузера
// Они будут обновлять при движении мыши
document.onmousemove = function(event) {
var event = event || window.event;
//document.getElementById('help').innerHTML = "x = " + defPosition(event).x + ", y = " + defPosition(event).y;

//Здесь координаты присваиватся положению слоя относительно окна и к координате х плюсуется 15 пикселов, чтоб курсор не был на подсказке.
document.getElementById('help').style.left = defPosition(event).x + 15 + "px";
document.getElementById('help').style.top = defPosition(event).y + "px";
}

//Функция, которая делает видимым наш слой и вкладывает в него необходимый текст.
function helpBox(title, text) {
//Вкладываем текст
document.getElementById('helpTitle').innerHTML = title;
document.getElementById('helpText').innerHTML = text;

//Делаем видимым\невидимым
if(document.getElementById('help').style.display == 'none'){
document.getElementById('help').style.display = 'block';
}else{
document.getElementById('help').style.display = 'none';
}
}

// -->
</script>

HTML код:
<!--Это сам слой, который является всплывающей посказкой, состоит из трех дивов, общий контейнер, тайтл и текст-->

<div id="help" class="helpBox" style="display:none;position:absolute;"><p id="helpTitle" class="helpTitle">Title</p><p id="helpText" class="helpText">Help text</p></div>

<!-- это элемент который вызывает подсказку при наведении курсора мыши на нее, и скрывает, когда курсор убирается-->

<img src="help.gif" onMouseOver="helpBox('Пересчет значений', 'Если Вы сомневаетесь в достоверности отображаемых значений, то Вы можете пересчитать все значения')" onMouseOut="helpBox()">

Функция helpBox работает по следующеей схеме:
helpBox('title', 'text')

Ну и CSS:
.helpBox{background:#fff;border:1px solid #666;width:200px;}
.helpTitle{background: #ff9900;width:100%;color:#000;}
.helpText{padding:5px;}
Наверх