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

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

Всплывающая подсказка На многих сайтах есть красивые всплывающие подсказки, которые не мешают общему тексту, но при необходимости помогут читателю (пользователю сайта) разобраться более детально либо в тексте, либо в функционале сайта. Иногда всплывающие подсказки прячут под картинки или под кнопки меню. Все зависит от цели и конкретной ситуации. Также за счет них сайт начинает выглядеть более презентабельно в глазах посетителей. Только поисковики к сожалению не учитывают всяких таких примочек, ну да ладно. Речь тут не об этом... В общем в данной статье, я вам расскажу, как сделать красивую всплывающую подвижную подсказку только средствами 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';}

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

  Оставьте комментарий!
  Похожие статьи
Возможности системы записи Clon
Возможности системы записи Clon
Возможности системы записи Clon
Все о цифровых мини АТС и телефонии
Все о цифровых мини АТС и телефонии
Все о цифровых мини АТС и телефонии
Обзор инструментов Bing
Обзор инструментов Bing
Обзор инструментов Bing
Cистемы размещения контекстной рекламы
Cистемы размещения контекстной рекламы
Cистемы размещения контекстной рекламы
Культура
Книги и Литература
Интернет
Финансы
Спорт
Туризм
Товары
История
Мистика
Отношения
Семья
Ремонт
Игры
Мода
Медицина
Кулинария
Государство
Авто
Увлечения
Психология
Дизайн
Разное
Наука
Образование
ПнВтСрЧтПтСбВс
Может заинтересовать
Старая Русса – старинный курорт в Новгородской области
Дерби северного Лондона не выявило победителя, но обозначило чемпиона Англии
Сюжет фильма "Однажды двадцать лет спустя"
Мексиканская пирамида
Статистика

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


© gfom.ru, Глеб Фомин, Культура, Искусство, Философия, 2019