prototype

ну и как это понимать?

Всплывающие подсказки tooltip на javascript: Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip. Не найдя того что мне нужно, я был вынужден написать свой движок. Тщательно протестировал его на старых браузерах, так что можете быть уверенными что код работает во всех браузерах, а в браузере IE аж начиная с версии 5,5 Теперь разберем как работает код! Подробное описание: В чем вообще преимущество данного движка? В том что не нужно ничего программировать и разбираться в коде Давайте сразу разберем пример: Допустим у вас есть html код в котором есть теги у которых есть id <br /><br /><br /><br /><br /> <div id="lololo">наведи сюда мышь 1</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="lololox">наведи сюда мышь 2</div> <br /><br /><br /><br /><br /> Как сделать так чтобы при навидении на div-ы с id равными lololo и lololox всплывали подсказки причем для каждого id своя подсказка? Для начала подключите код движка желательно перед тегом </head> Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту: var tooltip = { create:function (args) { args = args || {}; var default_args = { 'img':true, 'border':'1px solid #000000', 'bg_img_1':'imgtool/tooltip-1.png', 'bg_img_2':'imgtool/tooltip-2.png', 'bg_img_3':'imgtool/tooltip-3.png', 'bg_img_4':'imgtool/tooltip-4.png', 'bg_img_5':'imgtool/tooltip-5.png', 'bg_img_6':'imgtool/tooltip-6.png', 'bg_img_7':'imgtool/tooltip-7.png', 'bg_img_8':'imgtool/tooltip-8.png', 'bg_color':'#ffffff', 'width':19, 'height':15, 'font':12, 'font_color':'#000000', 'id_el':[], 'id_txt':[], 'pos':'bottomright', 't':10, 'l':15, 'timer_on':30, 'speed_on':5, 'timer_off':30, 'speed_off':5, 'alpha_end':100 } for(var index in default_args) { if(typeof args[index] == "undefined") args[index] = default_args[index]; } var ie = window.navigator.appName=='Microsoft Internet Explorer' ? true : false; var el; el= document.createElement('div'); el.setAttribute('id', 'tooltip_panel'); el.style.position='absolute'; el.style.zIndex=30; el.style.top='0px'; el.style.left='0px'; el.style.visibility='hidden'; el.style.display='none'; document.body.appendChild(el); var el_m=[]; for(var i=0;i<8;i++) { if(args['img']) { if(ie && args['bg_img_'+(i+1)].toLowerCase().indexOf('.png')!= -1) { switch(i) { case 0: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_1']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 1: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_2']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;'; break; case 2: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_3']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 3: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_4']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;'; break; case 4: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_5']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;'; break; case 5: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_6']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 6: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_7']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;'; break; case 7: el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_8']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; } } else { switch(i) { case 0: el_m[i]='background-image:url('+args['bg_img_1']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 1: el_m[i]='background-image:url('+args['bg_img_2']+'); height:'+args['height']+'px; font-size:1px;'; break; case 2: el_m[i]='background-image:url('+args['bg_img_3']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 3: el_m[i]='background-image:url('+args['bg_img_4']+'); width:'+args['width']+'px; font-size:1px;'; break; case 4: el_m[i]='background-image:url('+args['bg_img_5']+'); width:'+args['width']+'px; font-size:1px;'; break; case 5: el_m[i]='background-image:url('+args['bg_img_6']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; case 6: el_m[i]='background-image:url('+args['bg_img_7']+'); height:'+args['height']+'px; font-size:1px;'; break; case 7: el_m[i]='background-image:url('+args['bg_img_8']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;'; break; } } } else { switch(i) { case 0: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; case 1: el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; case 2: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; case 3: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;'; break; case 4: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;'; break; case 5: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; case 6: el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; case 7: el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;'; break; } el.style.border=args['border']; } } el.innerHTML=''+ '<table border="0" cellpadding="0" cellspacing="0">'+ '<tr>'+ '<td><div style="'+el_m[0]+'"></div></td>'+ '<td><div style="'+el_m[1]+'"></div></td>'+ '<td><div style="'+el_m[2]+'"></div></td>'+ '</tr>'+ '<tr>'+ '<td style="'+el_m[3]+'"></td>'+ '<td style="font-family:Tahoma,Verdana,Arial,Times New Roman,Helvetica,sans-serif; font-size:'+args['font']+'px; color:'+args['font_color']+'; background-color:'+args['bg_color']+'; white-space:nowrap;" id="td_tooltip_txt"></td>'+ '<td style="'+el_m[4]+'"></td>'+ '</tr>'+ '<tr>'+ '<td><div style="'+el_m[5]+'"></div></td>'+ '<td><div style="'+el_m[6]+'"></div></td>'+ '<td><div style="'+el_m[7]+'"></div></td>'+ '</tr>'+ '</table>'; this.param.pos=args['pos']; this.param.l=args['l']; this.param.t=args['t']; this.param.timer_on=args['timer_on']; this.param.speed_on=args['speed_on']; this.param.timer_off=args['timer_off']; this.param.speed_off=args['speed_off']; this.param.alpha_end=args['alpha_end']; this.param.id_el=args['id_el']; this.param.id_txt=args['id_txt']; this.param.start(); }, get_elm:function (n) { switch(n) { case 1: return document.getElementById('tooltip_panel'); break; case 2: return document.getElementById('td_tooltip_txt'); break; } }, param: { pos:'auto', t:0, l:0, timer_on:0, speed_on:0, timer_off:0, speed_off:0, alpha:0, alpha_end:0, id_el:[], id_txt:[], get_tiou:0, start: function () { var tooltip_el; window.onload = function() { for(var i=0;i<tooltip.param.id_el.length;i++) { tooltip_el=document.getElementById(tooltip.param.id_el[i]); tooltip_el.onmousemove=function (e) { tooltip.onmmo(e); } tooltip_el.onmouseover=function (e) { tooltip.onmov(e,this.id); //tooltip.onmov(e,this.getAttribute('id')); } tooltip_el.onmouseout=function () { tooltip.onmou(); } } } } }, onmmo: function (e) { var xy = this.getp(e); var p = this.param.pos; var cxy = this.getc(); //this.get_elm(1).clientWidth if(p=='auto') { if(xy.x>cxy.x && xy.y<cxy.y) {//topright —> bottomleft this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px'; this.get_elm(1).style.top=xy.y+this.param.t+'px'; } else if(xy.x>cxy.x && xy.y>cxy.y) {//bottomright —> topleft this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px'; this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px'; } else if(xy.x<cxy.x && xy.y>cxy.y) {//bottomleft —> topright this.get_elm(1).style.left=xy.x+this.param.l+'px'; this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px'; } else if(xy.x<=cxy.x && xy.y<=cxy.y) {//topleft —> bottomright this.get_elm(1).style.left=xy.x+this.param.l+'px'; this.get_elm(1).style.top=xy.y+this.param.t+'px'; } } else if(p=='topleft' || p=='lefttop') { this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px'; this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px'; } else if(p=='topright' || p=='righttop') { this.get_elm(1).style.left=xy.x+this.param.l+'px'; this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px'; } else if(p=='bottomleft' || p=='leftbottom') { this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px'; this.get_elm(1).style.top=xy.y+this.param.t+'px'; } else if(p=='bottomright' || p=='rightbottom') { this.get_elm(1).style.left=xy.x+this.param.l+'px'; this.get_elm(1).style.top=xy.y+this.param.t+'px'; } }, onmov: function (e,atr) { this.noerr(); this.get_elm(1).style.visibility='visible'; this.get_elm(1).style.display='block'; this.settxt(atr); this.param.alpha=0; tooltip.show(); this.onmmo(e); }, onmou: function () { this.noerr(); tooltip.hide(); }, settxt: function (atr) { for(var x in tooltip.param.id_el) { if(tooltip.param.id_el[x]===atr) { this.get_elm(2).innerHTML=tooltip.param.id_txt[x]; } } }, show: function () { this.get_elm(1).style.opacity=this.param.alpha*.01; this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')'; this.param.alpha=this.param.alpha+this.param.speed_on; if(this.param.alpha<this.param.alpha_end) { this.param.get_tiou=setTimeout('tooltip.show();',this.param.timer_on); } else { this.get_elm(1).style.opacity=this.param.alpha_end*.01; this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')'; this.param.alpha=this.param.alpha_end; } }, hide: function () { this.get_elm(1).style.opacity=this.param.alpha*.01; this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')'; this.param.alpha=this.param.alpha-this.param.speed_off; if(this.param.alpha>0) { this.param.get_tiou=setTimeout('tooltip.hide();',this.param.timer_off); } else { this.get_elm(1).style.opacity=this.param.alpha_end*.01; this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')'; this.param.alpha=0; this.get_elm(1).style.visibility='hidden'; this.get_elm(1).style.display='none'; } }, noerr: function () { clearTimeout(this.param.get_tiou); }, getp: function (e) { var x=0, y=0; if(!e) {e = window.event;} if(e.pageX || e.pageY) { x=e.pageX; y=e.pageY; } else if(e.clientX || e.clientY) { x=e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-document.documentElement.clientLeft; y=e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-document.documentElement.clientTop; } return {"x":x, "y":y}; }, getc: function () { function getClientWidth() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth; } function getClientHeight() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight; } function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop); } function getBodyScrollLeft() { return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft); } function getClientCenterX() { return parseInt(getClientWidth()/2)+getBodyScrollLeft(); } function getClientCenterY() { return parseInt(getClientHeight()/2)+getBodyScrollTop(); } var x=0, y=0; x=getClientCenterX(); y=getClientCenterY(); return {"x":x, "y":y}; } }; Дальше после подключенного движка можно его запускать с помощью следующего кода: <script type="text/javascript"> tooltip.create({ 'img':true, 'border':'1px solid #000000', 'bg_img_1':'imgtool/tooltip-1.png', 'bg_img_2':'imgtool/tooltip-2.png', 'bg_img_3':'imgtool/tooltip-3.png', 'bg_img_4':'imgtool/tooltip-4.png', 'bg_img_5':'imgtool/tooltip-5.png', 'bg_img_6':'imgtool/tooltip-6.png', 'bg_img_7':'imgtool/tooltip-7.png', 'bg_img_8':'imgtool/tooltip-8.png', 'bg_color':'#ffffff', 'width':19, 'height':15, 'font':12, 'font_color':'#000000', 'id_el':[ 'lololo', 'lololox' ], 'id_txt':[ 'Это всплывающая подсказка<br />новая строка в ней', 'Еще одна подсказка!!!!!!!' ] 'pos':'bottomright', 't':10, 'l':15, 'timer_on':30, 'speed_on':5, 'timer_off':30, 'speed_off':5, 'alpha_end':100 }); </script> Давайте теперь посмотрим для чего нужен какой параметр: 'img' - может принимать значение как true так и false при установке true рамка подсказок формируется из изображений, при false из обычного бордюра 'border' - если img установлен false то здесь пишутся параметры толщина цвет бордюра рамки всплывающей подсказки аналогично как в css Если параметр img установлен true, то для формирования рамки всплывающих подсказок будут использованы следующие изображение 'bg_img_1' - изображение левого верхнего угла рамки 'bg_img_2' - изображение верхнего центр рамки 'bg_img_3' - изображение правого верхнего угла рамки 'bg_img_4' - изображение левого центра рамки 'bg_img_5' - изображение правого центра рамки 'bg_img_6' - изображение левого нижнего угла рамки 'bg_img_7' - изображение нижнего центра рамки 'bg_img_8' - изображение правого нижнего угла рамки 'bg_color' - цвет фона рамки Если параметр img установлен true, то размеры угловых картинок рамки будут устанавливаться в свойстве width и height, если параметр img установлен false то параметры width и height будут отступом между текстом и рамкой, соответственно width слева и справа, height сверху и снизу рамки. 'width' - ширина угловых изображений рамки, либо отступ слева и справа от рамки, в зависимости от установок параметра img 'height' - высота угловых изображений рамки, либо отступ сверху и снизу от рамки, в зависимости от установок параметра img 'font' - размер шрифта подсказки в пикселях 'font_color' - цвет текста подсказки 'id_el' - массив идентификаторов id для которых устанавливается подсказка 'id_txt' - массив текста подсказок, для каждого id из параметра id_el своя подсказка в той же последовательности. Подсказка может всплывать слева внизу от курсора, справа внизу, слева сверху, справа сверху, либо автоматически будет вычисляться оптимальное положение подсказки. 'pos' - Подсказка позиционируется автоматически - 'auto', всплывает слева вверху от курсора - 'topleft' либо 'lefttop', всплывает справа сверху от курсора - 'topright' либо 'righttop', всплывает слева внизу от курсора - 'bottomleft' либо 'leftbottom', всплывает справа внизу от курсора - 'bottomright' либо 'rightbottom' 't' - отступ рамки подсказки от курсора в пикселях слева либо справа в зависимости от установок параметра pos 'l' - отступ рамки подсказки от курсора в пикселях сверху либо снизу в зависимости от установок параметра pos 'timer_on' - скорость появления подсказки в миллисекундах 'speed_on' - скорость появления подсказки от 1 - до значения параметра alpha_end 'timer_off' - скорость исчезновения подсказки в миллисекундах 'speed_off' - скорость исчезновения подсказки от значения параметра alpha_end - до 1 'alpha_end' - прозрачность отображаемой подсказки от 0 до 100, где 0 полная прозрачность Большинство параметров не требуют установки, поэтому можно упростить наш скрипт и написать его так: <script type="text/javascript"> tooltip.create({ 'id_el':[ 'lololo', 'lololox' ], 'id_txt':[ 'Это всплывающая подсказка<br />новая строка в ней', 'Еще одна подсказка!!!!!!!' ] 'pos':'auto' }); </script> можно написать и так, обратите внимание что подсказка представляет собой изображение! <script type="text/javascript"> tooltip.create({ 'img':false, 'border':'1px solid #000000', 'id_el':[ 'lololo', 'lololox' ], 'id_txt':[ '<img src="http://nagon.net/uploads/images/26/26-bfig739m1.jpg" border="0" />', 'Еще одна подсказка!!!!!!!' ] 'pos':'bottomright', }); </script> Работа с cookie: Скрипт работает во всех браузерах включая IE начиная с версии 5.5 Для начала подключите код движка желательно перед тегом </head> Можете поместить этот движок в отдельный файл, например cooker.js без тегов и подключать его к своему сайту: var cooker = { set: function(cookie_name, cookie_value, cookie_expires, cookie_path, cookie_domain, cookie_secure) { if(cookie_name!==undefined) { cookie_expires=cookie_expires || 0; var expire_date = new Date; expire_date.setTime(expire_date.getTime() + (cookie_expires*1000)); document.cookie = cookie_name + "=" + escape(cookie_value)+'; ' + ((cookie_expires === undefined) ? '' : 'expires=' + expire_date.toGMTString()+'; ') + ((cookie_path === undefined) ? 'path=/;' : 'path='+cookie_path+'; ') + ((cookie_domain === undefined) ? '' : 'domain='+cookie_domain+'; ') + ((cookie_secure === true) ? 'secure; ' : ''); } }, get: function(cookie_name) { var cookie = document.cookie, length = cookie.length; if(length) { var cookie_start = cookie.indexOf(cookie_name + '='); if(cookie_start != -1) { var cookie_end = cookie.indexOf(';', cookie_start); if(cookie_end == -1) { cookie_end = length; } cookie_start += cookie_name.length + 1; return unescape(cookie.substring(cookie_start, cookie_end)); } } }, erase: function(cookie_name) { cooker.set(cookie_name, '', -1); }, test: function() { cooker.set('test_cookie', 'test', 10); var work = (cooker.get('test_cookie') === 'test') ? true : false; cooker.erase('test_cookie'); return work; } }; Создание cookie: cooker.set('name', 'value', 60); //устанавливаю кукисы с именем name, значением value на 60 секунд Устанавливать cookie можно с большем числом параметров, например так: cooker.set('name', 'value', 60, '/', 'nagon.net'); Или так: cooker.set('name', 'value', 60, '/', 'nagon.net', true); Получение параметра из cookie: var cookie_value; cookie_value = cooker.get('name'); alert(cookie_value); Можно и так: alert(cooker.get('name')); Удаление cookie: cooker.erase('name'); Проверяем включены ли в браузере cookie: var cookie_test; cookie_test = cooker.test(); if(cookie_test) { alert('Все нормально, в вашем браузере кукисы работают'); } else { alert('Плохо, в вашем браузоре кукисы отключены'); } Или и так: if(cooker.test()) { alert('Все нормально, в вашем браузере кукисы работают'); } else { alert('Плохо, в вашем браузоре кукисы отключены'); } Описание параметров при создании cookie: NRMSLib - библиотека скриптовых эффектов - эффект снега (снег на сайт) - эффект дождя на javascript (дождь на сайт) - эффект пузырей на javascript (пузыри на сайт) - эффект сквозь вселенную на javascript - эффект печатающегося текста как в матрице на javascript - эффект матрицы на javascript - предварительная загрузка сайта на javascript - раздвижная панель на javascript - выезжающая панель на javascript - панель вверху на javascript - панели аккордеон на javascript - прогресс бар на javascript - показ картинок на javascript - работа с кукиесами на javascript - свой чат на javascript - звук на сайт на javascript - готовые функции на javascript и т.д. Все описанные выше скрипты с примерами собраны в архив: Скачать архив с примерами Скачать архив с примерами (зеркало) Скачать архив с примерами (зеркало)