AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

Универсальная система всплывающих подсказок позволяет интуитивно понятно сделать систему помощи на страницах Вашего сайта. В нужном месте Вы размещаете знак вопроса ?. При наведении на него медленно и красиво возникает всплывающая подсказка, использующая стили HTML5 для закругления углов и отбрасывания тени. Если у пользователя старый браузер, то подсказка так же корректно будет работать, но в квадратном DIV без украшательств. При клике на неё происходит переход на соответствующий раздел помощи с подробным описанием.

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

Html:

<span class="hlp1"
	onclick="return !window.open('sitemap_options.php#rs1')"
	onmouseover="_tt.show(this,'Всплывающая подсказка.&lt;br&gt;Это вторая строка подсказки.')">?</span>

Стили:

/*всплывающие подсказки*/
#tt {position:absolute; display:block;
	padding:10px;
	border:solid #089dcb;
	border-width:1px;
	border-radius:10px 10px 10px 0px;
	-webkit-border-radius:10px 10px 10px 0px;
	-moz-border-radius:10px 10px 10px 0px;
	-webkit-box-shadow:1px 1px 2px #888888;
	-moz-box-shadow:1px 1px 2px #888888;
	box-shadow:1px 1px 2px #888888;
	background-color:#ffD;
}
.hlp1 {	color:#000;border:#9fbddd 1px solid;background-color:#E7F5FE;
	cursor:help;margin-left:5px;line-height:14px;
	width:12px;display:inline-block;text-align:center;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	font-weight:100;
	text-indent:0;
}

Скрипт:

var _tt=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 8;
	var timer = 10;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,/*c,b,*/h;
	var ie = document.all ? true : false;
	return{
		show:function(e,v,w){
			var t=getEventTarget(e);addEvent(t,'mouseout',this.hide); t.style.cursor='help';
			if(tt==null){
				tt=document.createElement('div');
				tt.setAttribute('id',id);
				document.body.appendChild(tt);
				tt.style.opacity=0;
				if(ie)tt.style.filter = 'alpha(opacity=0)';
			}
			tt.style.display = 'block';
			tt.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(tt.offsetWidth > maxw){tt.style.width=maxw+'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer=setInterval(function(){_tt.fade(1)},timer);
		   dd=getOffset(t);
		   tt.style.top = (dd.top-h+4) + "px";
		   tt.style.left = (dd.left+13) + "px";

		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){i = endalpha - a;
				}else if(alpha < speed && d == -1){i = a;}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				if(ie)tt.style.filter='alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(e){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){_tt.fade(-1)},timer);
		}
	};
}();

/* вспомогательная функция получения координат элемента */

function getOffset(elem) {
if(elem.getBoundingClientRect){
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;
    return { top: Math.round(top), left: Math.round(left) }
}else{
    var top=0, left=0;
    while(elem) {
        top = top + parseInt(elem.offsetTop);
        left = left + parseInt(elem.offsetLeft);
        elem = elem.offsetParent;
    }
    return {top: top, left: left}
}
}

/* вспомогательная функция получения объекта, на котором возникло событие */

function getEventTarget(e) {
  var e = e || window.event;
  var target=e.target || e.srcElement;
  if(typeof target == "undefined")return e; // передали this, а не event
  if (target.nodeType==3) target=target.parentNode;// боремся с Safari
  return target;
}

/* стандартная вспомогательная функция назначения обработчика событий */

var addEvent = (function(){
	if (document.addEventListener){
        	return function(obj, type, fn, useCapture){
                	obj.addEventListener(type, fn, useCapture);
	}
	} else if (document.attachEvent){ // для Internet Explorer
	return function(obj, type, fn, useCapture){
	        obj.attachEvent("on"+type, fn);
	}
	} else {
	return function(obj, type, fn, useCapture){
	        obj["on"+type] = fn;
	}
	}
})();

.

© Copyright 2008-2016 by KDG