Приветствую Вас Гость • Регистрация • Вход
Понедельник, 14.10.2019
Главная » 2012 » Декабрь » 20 » Красивая всплывающая подсказка с помощью JavaSсript и CSS
11:47
Красивая всплывающая подсказка с помощью JavaSсript и CSS
Здравствуйте уважаемые читатели!

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

Пример фото 1:

Для себя я эту проблему решил с помощью  помощью JavaSсript и CSS.Сейчас я расскажу и Вам как это сделать правильно.
 Для начала открываем нашу тему оформления,к примеру возмем блоги WordPress -это будет папка /wp-content/themes/Ваша тема которая стоит/ и ищем в ней файл style.css .Затем открываем его и где Вам удобно будет (разницы нет никакой где мы поставим наш код),ставим наш код.
Code
/*Всплывающая подсказка*/ #tooltip { background:#d9effd; border:1px solid #C6CBFF; color:#333333; font:menu; margin:0px; padding:3px 5px; position:absolute; visibility:hidden; -moz-border-radius:10px; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: 0 0 25px mediumslateblue; -moz-box-shadow: 0 0 25px mediumslateblue; box-shadow: 0 0 10px mediumslateblue; }


После того как мы прописали наш код,создаем файл JS под названием tooltip.js со следующим содержимым

Code
var tooltip = { /* НАЧАЛО НАСТРОЕК */ options: { attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank" newline_entity: "<>", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки max_width: 250, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована delay: 100, // задержка при показе tooltip'а в миллисекундах skip_tags: ["link", "/css/my.css"] // теги, у которых не обрабатываем атрибуты alt и title }, /* КОНЕЦ НАСТРОЕК */ t: document.createElement("DIV"), c: null, g: false, canvas: null, m: function(e){ if (tooltip.g){ var x = window.event ? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : e.pageX; var y = window.event ? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop) : e.pageY; tooltip.a(x, y); } }, d: function(){ tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0]; tooltip.t.setAttribute("id", "tooltip"); document.body.appendChild(tooltip.t); if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error var l = a.length; for (var i = 0; i < l; i++){ if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue; var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so... if (tooltip_title && typeof tooltip_title != "string") tooltip_title = ""; var tooltip_alt = a[i].getAttribute("alt"); var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip.options.blank_text; if (tooltip_title || tooltip_blank){ a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title); if (a[i].getAttribute(tooltip.options.attr_name)){ a[i].removeAttribute("title"); if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt"); tooltip.l(a[i], "mouseover", tooltip.s); tooltip.l(a[i], "mouseout", tooltip.h); } }else if (tooltip_alt && a[i].complete){ a[i].setAttribute(tooltip.options.attr_name, tooltip_alt); if (a[i].getAttribute(tooltip.options.attr_name)){ a[i].removeAttribute("alt"); tooltip.l(a[i], "mouseover", tooltip.s); tooltip.l(a[i], "mouseout", tooltip.h); } } if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){ // } } document.onmousemove = tooltip.m; window.onscroll = tooltip.h; tooltip.a(-99, -99); }, _: function(s){ s = s.replace(/\&/g,"&"); s = s.replace(/\/g,">"); return s; }, s: function(e){ if (typeof tooltip == "undefined") return; var d = window.event ? window.event.srcElement : e.target; if (!d.getAttribute(tooltip.options.attr_name)) return; var s = d.getAttribute(tooltip.options.attr_name); if (tooltip.options.newline_entity){ var s = tooltip._(s); s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "
"); tooltip.t.innerHTML = s; }else{ if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild); tooltip.t.appendChild(document.createTextNode(s)); } tooltip.c = setTimeout(function(){ tooltip.t.style.visibility = 'visible'; }, tooltip.options.delay); tooltip.g = true; }, h: function(e){ if (typeof tooltip == "undefined") return; tooltip.t.style.visibility = "hidden"; if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild); clearTimeout(tooltip.c); tooltip.g = false; tooltip.a(-99, -99); }, l: function(o, e, a){ if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround! else if (o.attachEvent) o.attachEvent("on" + e, a); else return null; }, a: function(x, y){ var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : window.innerWidth + window.pageXOffset; var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // should be vice verca since Opera 7 is crazy! if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto"; var t_width = tooltip.t.offsetWidth; var t_height = tooltip.t.offsetHeight; tooltip.t.style.left = x + 8 + "px"; tooltip.t.style.top = y + 8 + "px"; if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px"; if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px"; } } Array.prototype.in_array = function(value){ var l = this.length; for (var i = 0; i < l; i++) if (this[i] === value) return true; return false; };

После того как мы создали наш файл закидываем его в корень нашей темы   /wp-content/themes/Ваша тема которая стоит/. На этом наша основная часть закончена,теперь нам нужно вызвать наш скрипт и запустить его в действие.А сделаем мы это вот таким вот простым способом.

Вызываем наш скрипт таким запросом:
Code
<script src="/wp-content/themes/наша тема/tooltip.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>

Ставим желательно в самом верху.Вот и все ,у нас все готово ,сохраняем все это ,проверяем и радуемся.Если Вы правильно все сделали по моим инструкциям,то у нас выходит так как это видно на изображении 2:

Для наглядности можете навести на картинку и посмотреть как все это выглядит в действии.
Ну и для полного комплекта представляю мануал с готовым скриптом  Скрипт красивого всплывающего меню

Незабываем говорить СПАСИБО!!!Всем пока.
Категория: Javasсript | Просмотров: 2215 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика