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