Добрый день! Скачал пример всплывающей подсказки с форума, но беда в том, что она у меня прыгает (точнее мерцает) и двигается вправо-влево. Хотелось бы закрепить подсказку прямо на картинке и убрать мерцание.
<div class="box col3 smola"><div class="image"><img src="style/images/art/smola.jpg" alt="смола эпоксидная" onMouseOver="toolTip(event, '0,5кг - 80 грн.<br>1кг - 160 грн.<br>3кг - 155 грн.<br>5кг - 150 грн.<br>10кг - 145 грн...')" onMouseOut="toolTip('')"></div>
<form method="post" action="" class="jcart">
<p>Чешская <b>эпоксидная смола Epoxy-520</b> Прозрачный аналог ЭД-20, Тара от 0,5 кг. до бочки 235 кг.<br>
<a href="http://epoxy-polymer.in.ua/smola.html" target="_blank" class="button blue">Подробнее</a>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken']; ?>" />
<input type="hidden" name="my_item_id" value="520" />
<input type="hidden" name="my_item_name" value="эпоксидная смола Epoxy-520" />
<input type="hidden" name="my_item_price" value="160.00" />
<input type="hidden" name="my_item_unit" value="кг" />
<input type="hidden" name="my_item_param" value="0.5=160|1=160|3=155|5=150|10=145|20=140|50=135" />
<input type="hidden" name="my_item_qty" value="0.5" />
<input type="hidden" name="my_item_size" value="0.1" />
<input type="submit" name="my_add_button" value="Купить" class="button red " /></p></form></div>
<style>
#floatTip {
position: fixed; /* Абсолютное позиционирование */
width: 150px; /* Ширина блока */
display: none; /* Прячем от показа */
border: 1px solid #666666; /* Параметры рамки */
padding: 7px; /* Поля вокруг текста */
font-family: sans-serif; /* Рубленый шрифт */
font-size: 12pt; /* Размер шрифта */
color: #333; /* Цвет текста */
background: #ffffbb; /* Цвет фона */
border-radius: 5px;
box-shadow:10px 10px 5px 0px #F8F8FF;
margin-top:0px;
}
</style>
<script>
document.onmousemove = moveTip;
function moveTip(e) {
floatTipStyle = document.getElementById("floatTip").style;
w = 160; // Ширина подсказки
// Для браузера IE6-8
if (document.all) {
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
// Для остальных браузеров
} else {
//x = 0; // Координата X курсора
//y = 0; // Координата Y курсора
x = e.pageX; // Координата X курсора
y = e.pageY; // Координата Y курсора
}
// Показывать слой справа от курсора
if ((x + w + 10) < document.body.clientWidth) {
floatTipStyle.left = x + 'px';
// Показывать слой слева от курсора
} else {
floatTipStyle.left = x - w + 'px';
}
// Положение от верхнего края окна браузера
//floatTipStyle.top = y + 20 + 'px';
}
function toolTip(event, msg) {
floatTipStyle = document.getElementById("floatTip").style;
if (msg) {
// Выводим текст подсказки
document.getElementById("floatTip").innerHTML = msg;
// Показываем подсказку
floatTipStyle.display = "block";
} else {
// Прячем подсказку
floatTipStyle.display = "none";
}
}
</script>
Спасибо! Прошу прощения за неверное оформление вопроса! Ссылка на оригинал.
Самый простой вариант это сдвинуть подсказку так чтобы она не попадала под мышку. Тогда и по оси y её тоже нужно позиционировать чтобы она была например внизу от позиции мышки. И считая по стилю ширина подсказки у вас 150+2*7+2*1=165. Должно быть w = 165;
// Показывать слой справа от курсора
if ((x + w + 10) < document.body.clientWidth) {
floatTipStyle.left = x + 10 + 'px';
// Показывать слой слева от курсора
} else {
floatTipStyle.left = x - w - 10 + 'px';
}
// Положение от верхнего края окна браузера
floatTipStyle.top = y + 20 + 'px';
Если ваша логика кода предполагает что подсказка может всплывать и под мышкой, тогда нужно менять логику событий. Это сложнее.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть такой код, нужно отсортировать статьи по дате при нажатии на кнопку Sort by date, но без jQuery, всяких плагинов и тд
Как добавить HTML код определенных элементов в куки?Точнее есть генератор который при нажатии генерирует div элемент с рандомным цветом и в рандомный...