• Страница 1 из 1
  • 1
Tooltips всплывающие подсказки
Aleko
Дата: Среда, 19.08.2009, 17:01 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Так как такая тема уже поднималась, решил быстро написать и выложить скрипт подсказок. Копируем скрипт и ставим в самый низ body. Вызывается скрипт для каждого элемента с непустым тегом title.

UPD

Много воды утекло. Теперь я согласен с первым ответом в этой теме. Скрипт переписан, глобалок нет вообще, добавлен точный расчет анимации. Скрипт по новому стилизован. Его можно настроить так же как на этом сайте, но делать я этого по понятной причине не стал. Пользуйтесь.

Картинку прописанную в стилях берем из прикрепления к посту.

Code
<style type='text/css'>
.tip{
  padding:0 0 4px 0;
  background:url('taile.gif') no-repeat 15px 100%;
  z-index:9999;
  }
.tip div {
  font:12px Tahoma;
  font-weight:700;
  padding:3px 6px 5px;
  background: #0094ff;
  color: #efefef;
  }
</style>

<script type='text/javascript'>
(function(){
  var options = {
    
    opacity: 80, // прозрачность
    flyTop: 10, // расстояние отлетания вверх
    flyRight: 0, // расстояние отлета вправо
    offsetTop: 3, // отступ от курсора вверх
    offsetRight: -17, // отступ от курсора вправо
    animSpeed: 200 // время анимации в миллисекундах
     
   };
  var _ie=-[1,],_eval=function(a){if("function"==typeof a){a()}},_animator=[],_queue=0,animate=function(g,i,e,j){var d,b=0,c=function(m,o,n){if(m){if(!_ie){g.style.filter=n==100?"":"alpha(opacity="+n+")"}else{g.style.opacity=n}}else{g.style[o]=n+"px"}};for(d in i){var k=_queue,h=0,a,f=d=="opacity",l=null;while(k--){if(_animator[k]&&_animator[k].o==g&&_animator[k].p==d){clearInterval(_animator[k].timer),_animator.splice(k,1,null),l=k}}switch(d){case"opacity":h=!_ie?(g.style.filter?parseFloat(g.style.filter.match(/\d+/)):100):parseFloat(document.defaultView.getComputedStyle(g,null)[d]);if(_ie){i[d]/=100}break;case"marginTop":case"marginLeft":case"right":case"bottom":h=parseInt(g.style[d]||0);break;case"width":h=g.offsetWidth;break;case"height":h=g.offsetHeight;break;case"top":h=g.offsetTop;break;case"left":h=g.offsetLeft}if(!l){l=_queue++}if(e>0&&h!=i[d]){b++;(function(m,p,q,o,r,n){_animator[m]={o:p,p:q,start:new Date().getTime(),timer:setInterval(function(){a=(new Date().getTime()-_animator[m].start)/e;if(n){if(!_ie){p.style.filter="alpha(opacity="+((o-r)*a+r)+")"}else{p.style.opacity=(o-r)*a+r}}else{p.style[q]=(o-r)*(a<0.5?Math.pow(2*a,3)+0*1:2-Math.pow(2*(1-a),3))/2+r+"px"}if(a>=1){clearInterval(_animator[m].timer);_animator.splice(m,1,null);c(n,q,o);_eval(j);j=false}},8)}})(l,g,d,i[d],h,f)}else{c(f,d,i[d])}}if(!b){_eval(j),j=false}},_=function(a){(function(f,i,g,c,j,b,k){while(1){if(i.getAttribute&&i.getAttribute("title")&&i.getAttribute("title")!=""){break}if(i.parentNode&&i.parentNode!=document.body){i=i.parentNode}else{i=false;break}}if(i){i._=i.title;i.title="";document.body.appendChild(j=document.createElement("div"),j.innerHTML="<div>"+i._+"</div>",j.style.cssText="position:absolute;left:-9999px;top:-9999px;filter:alpha(opacity=0);opacity:0;margin-top:-"+options.flyTop+"px;margin-left:"+options.flyRight+"px;",j.className="tip",j);b=function(d){d=d||event;j.style.top=(document.documentElement.scrollTop||document.body.scrollTop)+d.clientY-options.offsetTop-j.offsetHeight+"px";j.style.left=(document.documentElement.scrollLeft||document.body.scrollLeft)+d.clientX+options.offsetRight+"px"};k=function(){_ie?i.removeEventListener("mouseout",k,0):i.detachEvent("onmouseout",k);i.title=i._;animate(j,{opacity:0,marginTop:-options.flyTop,marginLeft:options.flyRight},options.animSpeed,function(){document.body.removeChild(j);_ie?document.removeEventListener("mousemove",b,0):document.detachEvent("onmousemove",b)})};_ie?i.addEventListener("mouseout",k,0):i.attachEvent("onmouseout",k);_ie?document.addEventListener("mousemove",b,0):document.attachEvent("onmousemove",b);animate(j,{opacity:options.opacity,marginTop:0,marginLeft:0},options.animSpeed)}})(a||event,a.target||a.srcElement)};_ie?document.addEventListener("mousemove",_,0):document.attachEvent("onmousemove",_)
  })();
</script>
Прикрепления: 2485766.gif (0.1 Kb)
  
LastDay
Дата: Пятница, 28.08.2009, 03:06 | Сообщение # 2
молчун
Группа: Проверенные
Пользователь №: 140
Сообщений: 13
Утащил к себе, спасибо :).

Мой форум
  
WRC
Дата: Вторник, 20.10.2009, 15:00 | Сообщение # 3
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
Aleko, а как сделать чтоб этот скрипт можно было ставить между head ? и чтоб робил... ;)
а то так немного не удобно когда беспорядок в коде...


Устраняем баг при просмотре материала
  
Aleko
Дата: Вторник, 20.10.2009, 15:53 | Сообщение # 4
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
WRC, скрипты должны ставится в конец страницы.

Бесплатные обои.
  
Aleko
Дата: Воскресенье, 26.12.2010, 14:14 | Сообщение # 5
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
$INFO$Тему почистил.

Бесплатные обои.
  
zetwin
Дата: Среда, 26.01.2011, 15:08 | Сообщение # 6
молчун
Группа: Пользователи
Пользователь №: 3716
Сообщений: 1
king Спасибо! ad
  
Iceslim
Дата: Суббота, 05.03.2011, 09:01 | Сообщение # 7
шептун
Группа: Проверенные
Пользователь №: 3775
Сообщений: 61
Aleko, в главной форума этот скрипт вставить? Поставил, но ничего не изображается (после body).
  
Iceslim
Дата: Понедельник, 28.03.2011, 19:44 | Сообщение # 8
шептун
Группа: Проверенные
Пользователь №: 3775
Сообщений: 61
Quote (Iceslim)
Aleko, в главной форума этот скрипт вставить? Поставил, но ничего не изображается (после body).

АП
  
RazieL
Дата: Вторник, 02.08.2011, 11:12 | Сообщение # 9
молчун
Группа: Пользователи
Пользователь №: 4011
Сообщений: 8
Отличный скрипт, огромное благодарю Aleko.
  
muxa81
Дата: Пятница, 02.12.2011, 06:03 | Сообщение # 10
молчун
Группа: Пользователи
Пользователь №: 4154
Сообщений: 2
Спасибо Aleko отличный скрипт!
Только почему то в google chrome не работает, подсказки всплывают но стили не применяются, может как то его возможно обновить немного :?
  
Вождь
Дата: Четверг, 29.12.2011, 23:54 | Сообщение # 11
молчун
Группа: Пользователи
Пользователь №: 4566
Сообщений: 2
Quote
taile.gif
Дайте изображение, это как я понимаю хвостик...
  
Вождь
Дата: Четверг, 29.12.2011, 23:55 | Сообщение # 12
молчун
Группа: Пользователи
Пользователь №: 4566
Сообщений: 2
Quote (Вождь)
Дайте изображение, это как я понимаю хвостик...

все, нашел ))))
  
==d1AbLo==
Дата: Пятница, 15.03.2013, 04:28 | Сообщение # 13
молчун
Группа: Проверенные
Пользователь №: 3111
Сообщений: 15
На Opera не блокируется стандартный хинт, вылезает вместе с этим. Подскажите как поправить

http://www.copyright.ez.lv/
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.