Всплывающая подсказка
   
ГЛАВНАЯ ОБО МНЕ СТАТЬИ ТВОРЧЕСТВО КНИГИ КОНТАКТЫ

Всплывающая подсказка

Всплывающая подсказка На многих сайтах есть красивые всплывающие подсказки, которые не мешают общему тексту, но при необходимости помогут читателю (пользователю сайта) разобраться более детально либо в тексте, либо в функционале сайта. Иногда всплывающие подсказки прячут под картинки или под кнопки меню. Все зависит от цели и конкретной ситуации. Также за счет них сайт начинает выглядеть более презентабельно в глазах посетителей. Только поисковики к сожалению не учитывают всяких таких примочек, ну да ладно. Речь тут не об этом... В общем в данной статье, я вам расскажу, как сделать красивую всплывающую подвижную подсказку только средствами JavaScript без использования jQuery и с минимальным использованием CSS.

Пример такой подсказки можно посмотреть прямо на этом блоге. Наведите мышку на логотип сверху - Игорь Марков. И увидите, что появится окошко с текстом, на полупрозрачном черном фоне и будет ездить за курсором мышки до тех пор, пока курсор не выйдет за область логотипа. Давайте смоделируем самую простую ситуацию. У нас предположим есть страничка html, на ней есть картинка, и при наведении на эту картинку нам нужно показать текст. В общем, - поехали.

Сначала создаем файлик style.css и папку images. В папку images закачаем две картинки:

Картинку смайлика:

смайлик



И картинку для фона подсказки:

фон

Я думаю все понимают, как их скачать. Правой кнопкой - сохранить как.
Таким образом у вас должно в папке images появиться две картинки small.gif и opacity.png Далее идем в файлик style.css и задаем класс для всплывающего блока:
.hovinfo
display:none;
left:0px;
top:0px;
color: #ffffff;
font: normal 13px arial;
width:160px;
z-index: 10;
position:absolute;
background: url(images/opacity.png);
border:3px solid #000000;
text-align:center;
padding:8px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius: 6px;


Ну в принципе уже почти все готово, осталось только в нужный html файл, в котором вы хотите сделать такую подсказку, разместить следующий код сразу после тела BODY:

var posx=0; var posy=0;function mouseupdate(e) { if(!e) var e = window.event; if(!e) return;if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY;} else if (e.clientX || e.clientY) { scr=(document.compatMode != 'BackCompat') ? document.documentElement : document.body;posx = e.clientX+scr.scrollLeft; posy = e.clientY+scr.scrollTop;} var infoobj=document.getElementById('infoobj');if(infoobj) {infoobj.style.left=(posx+10)+'px';infoobj.style.top=(posy-40)+'px';}}document.onmousemove=mouseupdate;function infor(text) {var infoobj=document.getElementById('infoobj');if(!text) {infoobj.style.display='none'; return false;}infoobj.innerHTML=text;infoobj.style.display='block';}

Подписаться на новые статьи Подписаться на новые статьи

  Оставьте комментарий!
  Похожие статьи
meta description
meta description
Как правильно заполнять meta description. Особенности и полезные рекомендации.........
meta name
meta name
Какие бывают теги meta name........................
AJAX на jQuery
AJAX на jQuery
Думаете ajax это сложно? Ошибаетесь!........................
Программирование
Сео продвижение
Интернет
Компьютеры
Сайты
Оптимизация
Поисковики
Электронная коммерция
HTML, JavaScript

ПнВтСрЧтПтСбВс
Может заинтересовать
dravs.ru
Компьютерные вирусы
Внешний жесткий диск
Статистика

Индекс цитирования


© https://igmarkov.ru, Игорь Марков, Программирование, Интернет, SEO, Компьютеры, 2018