Профессиональное обучение
блоггингу от А до Я

Как сделать всплывающие подсказки на сайте или блоге?

Всплывающие подсказки на сайте или блоге! Как сделать?

Всем привет друзья! В этой статье я расскажу вам о том, как сделать всплывающие подсказки на своем сайте или блоге. Не знаете что это такое? Всплывающие подсказки — это подсказки в виде текста, которые появляются при наведении курсором мыши на какую-то область (текст или картинку).

Можете у себя на сайте сделать что-то похожее если хотите и вообще это нужно вам! Бывает пишешь на блог какой-нибудь пост, а в нем слово заумное присутствует. Чтобы не объяснять читателям что оно означает можно его сделать в виде ссылки и просто подсветить подсказкой.

Так же всплывающие подсказки хорошо использовать к примеру в формах обратной связи, формах заказа товаров и услуг и т.д. Короче что я вам объясняю, вы и так все это понимаете, давайте к делу. Итак! Подсказки такие вы сможете сделать у себя на сайте 2-мя способами.

1. Для простого сайта используя специальный Java-скрипт.

2. Для WordPress блога — специальный плагин - skinnytip-tooltip-generator

Давайте сначала по первому способу. Что вам нужно сделать?

а) скопировать вот этот код:

<script type="text/javascript">// <![CDATA[
/***********************************************
* Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var horizontal_offset="9px" //horizontal offset of hint box from anchor link
 
/////No further editting needed
 
var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&#038;&#038;!document.all
 
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
function iecompattest(){
return (document.compatMode &#038;&#038; document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie &#038;&#038; !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie &#038;&#038; !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight } return edgeoffset } function showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) &#038;&#038; document.getElementById("hintbox")){ dropmenuobj=document.getElementById("hintbox") dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" dropmenuobj.style.visibility="visible" obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility="hidden" dropmenuobj.style.left="-500px" } function createhintbox(){ var divblock=document.createElement("div") divblock.setAttribute("id", "hintbox") document.body.appendChild(divblock) } if (window.addEventListener) window.addEventListener("load", createhintbox, false) else if (window.attachEvent) window.attachEvent("onload", createhintbox) else if (document.getElementById) window.onload=createhintbox
// ]]></script>

и вставить его между тегами <head></head> вашего сайта.

б) в нужном месте на сайте где вы хотите вставить всплывающую подсказку вставить вот этот код в режиме html:

<a class="hintanchor" onmouseover="showhint('Здесь напишите текст, который будет всплывать при наведении курсора на объект', this, event, '150px')" href="#">?</a>

Текст: «Здесь напишите текст, который будет всплывать при наведении курсора на объект» измените на тот, который вам нужен, а вместо знака вопроса (?) можете либо написать какое-нибудь слово или словосочетание. При наведении на них и будет всплывать подсказка (текст).

Можете кстати картинку вставить вместо знака вопроса и текста. Если кто не знает как вставляется картинка, то вот так: <img src="http://адрес_до_картинки">. Главное смотрите чтобы размер был нормальный.

Так, думаю понятно. Идем дальше. Второй способ работает именно для wordpress блога, так как используется специальный плагин. Приступим:

а) Качаем плагин skinnytip-tooltip-generator, закидываем его в папку wp-content/plugins и активируем.

б) теперь при добавлении новой записи на ваш блог внизу под редактором появиться вот такое вот окошко, которое и будет генерировать для вас всплывающие подсказки.

всплывающие подсказки

В поле текст подсказки вводим нужный текст, выбираем тип подсказки (ссылка или картинка). Если ссылка, то вводим текст ссылки, если картинка, то прописываем до нее адрес. Url ссылки оставьте так как есть, когда показывается #, это означает, что ссылка никуда не ведет.

Как дополнение можете пофантазировать с дополнительными настройками CSS, шириной рамки, цветами и т.д. После оформления вами всплывающей подсказки, внизу в поле генератор всплывающих подсказок вам дадут специальный код, который и нужно будет скопировать и вставить в редактор в режиме HTML.

Сложно? Думаю нет! Пробуйте если нужно! Вещь полезная! Надеюсь статья была интересна для вас! А вы используете всплывающие подсказки у себя на сайте? Может быть знаете способ по-лучше?

С уважением, Александр Борисов


Школа блоггеров А.Борисова

Школа блоггеров А.Борисова

Школа блоггеров А.Борисова
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 17
  1. Ns11

    Спасибо за такую статью! Но помойму это называется ХИНТ. Не так ли? =)

    в 04:51 | Ответить
  2. Сергей Медведев

    Да Александр, весьма полезно...

    Спасибо. Часто к вам заглядываю:)

    в 11:01 | Ответить
  3. Сергей

    Очень интересная штучка! Нужно взять на заметку. Спасибо ! =)

    в 16:36 | Ответить
  4. Бурул

    Спасибо за подсказку.Интересуюсь всем.что может улучшить и сделать сайт интересней.

    в 21:09 | Ответить
  5. Азамат

    HTML еще никто не отменял...

    в 20:58 | Ответить
  6. TitenkoV

    А можно ли как-нибудь прописать скрипт в функции вордпресса, так чтоб не нужно было вводить код в HTML редакторе, а появилась кнопка в визуальном редакторе (на подобие вставки ссылки)

    в 08:42 | Ответить
  7. Дмитрий

    Любопытная статья! Начинаю становиться вашим поклонником, Александр! =)Регулярно слежу за вашим блогом =)

    в 18:40 | Ответить
  8. игорь

    спасибо полезная штука *THUMBS UP*

    в 11:40 | Ответить
  9. Calvin

    Повесить подсказки на ссылки можно  и простым css...

    Если уж использовать javascript, то так чтобы это было красиво

    в 00:16 | Ответить
  10. Ирина

    Спасибо! Было очень полезно!

    в 16:49 | Ответить
  11. Тимур

    Лучше не устанавливать лишние плагины, так как все это можно сделать с помощью html и css. Зачем нагружать сайт.

    в 10:35 | Ответить
    • Вячеслав Балашов

      А как сделать такую фишку без плагина?

      в 22:33 | Ответить
  12. Владимир

    Слушайте, а что же Вы забыли простой способ с применением атрибута title="тут сама всплывающая подсказка" ? Ведь сделать так намного проще и эффективнее !!! ;-)

    в 22:33 | Ответить
    • Антон

      именно! просто и понятно)

      в 19:02 | Ответить
      • Андрей

        Ну здесь показаны более широкие возможности настройки, а не только вывод текстового сообщения

        в 01:36 | Ответить
  13. Виктория

    Спасибо!

    в 22:31 | Ответить
  14. Мила

    Никогда не оставляла закладку на ваш блог, но на бескрайних просторах инета в который раз только у вас нахожу ответы. Респект.

    в 22:32 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]