Цветная всплывающая подсказка
Предлагаем Вашему вниманию скрипт, который при наведении курсора мыши на объект (ссылку или изображение), вместо обычной всплывающей подсказки, на Вашем сайте будет показывать настраиваемую цветную всплывающую подсказку. Преимуществами данной подсказки перед стандартной является то, что Вы самостоятельно можете задавать размер, цвет и фон окошка подсказки, а так же цвет и тип шрифта.
Для демонстрации работы приведенного ниже скрипта всплывающей подсказки, наведите курсор мышки на расположенную ниже ссылку или изображение:
Для получения такой замечательной цветной подсказки, всплывающей при наведении курсора мышки на указанные ссылки или изображения, как в продемонстрированном выше примере, добавьте в начало Вашей странички следующий JavaScript код:
<script type="text/javascript">
var d=document;
function defPosition(event) {
var x = y = 0;
if (d.attachEvent != null) {
x = window.event.clientX + (d.documentElement.scrollLeft ?
d.documentElement.scrollLeft : d.body.scrollLeft);
y = window.event.clientY + (d.documentElement.scrollTop ?
d.documentElement.scrollTop : d.body.scrollTop);
} else if (!d.attachEvent && d.addEventListener) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
return {x:x, y:y};
}
document.onmousemove = function(event) {
var event = event || window.event;
d.getElementById('hint').style.left = defPosition(event).x + 10 + "px";
d.getElementById('hint').style.top = defPosition(event).y - 10 + "px";
}
function helpBox_on(title, text) {
d.getElementById('hint_title').innerHTML = title;
d.getElementById('hint_text').innerHTML = text;
d.getElementById('hint').style.width = "200px";
d.getElementById('hint').style.border = "1px solid red";
d.getElementById('hint_title').style.padding = "5px";
d.getElementById('hint_text').style.padding = "5px";
d.getElementById('hint').style.display = "block";
}
function helpBox_off() {
d.getElementById('hint_title').innerHTML = "";
d.getElementById('hint_text').innerHTML = "";
d.getElementById('hint').style.width = 0;
d.getElementById('hint').style.border = 0;
d.getElementById('hint_title').style.padding = 0;
d.getElementById('hint_text').style.padding = 0;
}
</script>Далее необходимо создать и оформить блок, который будут появляться с нужным нам текстом. Делается это следующим образом:
<div id="hint" style="position:absolute; background: silver; border: 0; width: 0;">
<div id="hint_title" style="background: green; padding: 0;"></div>
<div id="hint_text" style="padding: 0;"></div>
</div>Далее можно приступать к оформлению ссылок и изображений, у которых должны появляться всплывающие подсказки:
<a href="http://usefulscript.ru/"
onMouseOver="helpBox_on('Подсказка для ссылки',
'Описание ссылки или той странички, куда она ведет.')" onMouseOut="helpBox_off()">
При наведении курсора на эту ссылку появится подсказка
</a>
<br><br>
<img src="image/img_1.png" onMouseOver="helpBox_on('Подсказка для изображения',
'А тут располагается текст с описанием именно для этого изображения.')"
onMouseOut="helpBox_off()">Собственно, это и весь код, который поможет Вам реализовать собственные всплывающие подсказки для нужных объектов.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.