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

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

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

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

  Оставьте комментарий!
  Похожие статьи
Минусы работы дома
Минусы работы дома
Так ли легко работать из дома? Что может помешать?
Где начать карьеру копирайтера?
Где начать карьеру копирайтера?
Хотите начать продавать статьи, но не знаете, с чего начать? Статья как раз для вас!
Принципы создания сайтов
Принципы создания сайтов
Создание сайтов является весьма перспективным направлением. Разумеется, у каждого владельца подобных ресурсов различные доходы, все напрямую зависит от выбранного способа монетизации, а также непосредственно от тематики сайта
Реально ли работать дома?
Реально ли работать дома?
Всю жизнь мечтали работать дома? Статья расскажет о возможностях фриланса
Культура
Книги и Литература
Интернет
Финансы
Спорт
Туризм
Товары
История
Мистика
Отношения
Семья
Ремонт
Игры
Мода
Медицина
Кулинария
Государство
Авто
Увлечения
Психология
Дизайн
Разное
Наука
Образование
ПнВтСрЧтПтСбВс
Может заинтересовать
Символы России
Россия проехалась по Германии. Финляндия следующая
Сотрудница по блату
Homefront: The Revolution - успех или провал?
Статистика

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


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