Как делается всплывающая подсказка при наведении на сайте? Узнай сейчас!

Здравствуйте, уважаемые друзья и гости блога atready.ru! Прошу прощения, что долго не писал, были некоторые трудности с интернетом – перешел к другому провайдеру на скоростной интернет. И сейчас доволен как слон! Ну да ладно, сейчас не об этом, а о том как делается всплывающая подсказка при наведении на сайте при помощи простенького скрипта и специального плагина для WordPress. А выбирать конечно же Вам, чем пользоваться, скриптом или плагином!

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

Для чего нужна всплывающая подсказка при наведении на сайте? Например Вы хотите, чтобы на вашем сайте незнакомые слова и выражения были разъяснены посетителю, но не прямо здесь в тексте статьи, а в другой статье, которая уже содержит данное объяснения незнакомого слова или выражения. Тогда Вы сможете при помощи всплывающей подсказки на сайте отправить посетителя за получением подробного ответа на нужную страницу. Если проще, то просто подсвечиваете неизвестное ему слово всплывающей подсказкой.

Теперь перейдем к основному моменту и рассмотрим как же именно делается всплывающая подсказка при наведении на сайте …

Всплывающая подсказка при наведении на сайте – Два способа создания!

Первый способ создания всплывающей подсказки на сайте созданном на WordPress – специальный плагин Всплывающие подсказки для WordPress. Скачать этот плагин можно здесь.

Установка данного плагина очень проста. Отправьте скачанную папку с плагином на свой хостинг по известному Вам уже пути в папку содержащую все плагины движка WordPress, а именно (wp-content/plugins).

Затем в вашей админке сайта WordPress активируйте вновь появившийся плагин. Все теперь он готов к работе для создания всплывающих подсказок на вашем сайте. У Вас появится вот такое окошко под редактором записей, когда Вы будете писать свои новые статьи:

Здесь все доступно и ясно. Вставьте в поле нужный Вам текст своей всплывающей подсказки, выберите тип всплывающей подсказки – ссылка или картинка. Если Вы выбираете текстовую ссылку для всплывающей подсказки, то вставьте нужную вам ссылку. Если вами выбрана картинка, то введите путь до нужной картинки.

Также Вы можете на ваше усмотрение изменить HTML и CSS3 вашей всплывающей подсказки изменив некоторые параметры. Экспериментируйте и все у Вас обязательно получится!

Это была всплывающая подсказка при наведении на сайт при помощи плагина для WordPress.

Всплывающая подсказка при наведении на сайт – способ второй

Это использование специального скрипта. Вот его код:

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&&!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 && 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 && !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 && !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) && 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> в шапке сайта.

Затем для получения нужного эффекта всплывающей подсказки на вашем сайте, вставьте вот такой коротенький код в то место, где нужно вывести всплывающее окно подсказки:

Просто измените текст, который в этом коде на свой. Вместо значка вопроса пишите то, что необходимо Вам. Экспериментируйте и все у Вас обязательно получится!

Вот и все на сегодня. Всем спасибо за внимание! Удачи и благополучия Вам!

4.5/5 - (2 голоса)