Генератор форм

Баннер

Для веб-мастера

Реклама


Как сделать всплывающую подсказку?

Рейтинг:
Дата: 2 сентября 2009 Просмотры 12254 Комментарии 5

Именно такой вопрос я задавал себе при разработке своего нового проекта, о котором Вы узнаете в ближайшее время!

Вот нашел неплохое решение, которым и решил поделиться с Вами.

Выглядеть это будет примерно так.

Итак, для того чтобы создать всплывающую подсказку, нам понадобится 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) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} return {x:x, y:y};
}
// Простая проверка // С помощью document.write выведем координаты прямо в окно браузера // Они будут обновлять при движении мыши
document.onmousemove = function(event) {
var event = event || window.event;

//Здесь координаты присваиватся положению слоя относительно окна //и к координате х плюсуется 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"></p>
<p id="helpText" class="helpText">Help text</p>
</div>

 

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

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

Ну и в конце, придадим вид нашей подсказки. Для этого используем следующие css правила

.helpBox{background:#fff;border:1px solid #666;width:200px;}
.helpTitle{background: #ff9900;width:100%;color:#000;}
.helpText{padding:5px;}

Ну вот собственно и все!

Кому надо исходник, можете скачать по этой ссылке.
 

Оцените эту статью:
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/73.html
4,8 из 5 на основе 3 оценок.
Твиттер Facebook Google plus RSS