Текущее время: 29 мар 2024, 03:37

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Пожалуйста, прежде чем задавать вопрос, воспользуйтесь поиском, возможно ответ уже существует!



Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 4 ] 
Автор Сообщение
СообщениеДобавлено: 18 апр 2011, 16:40 
Не в сети
Аватара пользователя

Зарегистрирован: 11 апр 2011, 19:01
Сообщения: 203
Откуда: Киев
Приветствую!

Сегодня я научу вас делать красивые всплывающие подсказки для ссылок, текст которых берётся из <a title="текст"

Пример можете посмотреть на моём экспериментальном сайте http://heroes.okis.ru , наведя курсор на любой пункт меню.

А теперь к делу.

1. В Редактировать CSS добавляем следующий код:
Код:
.tip{
  padding:0 0 4px 0;
  background:url('file/heroes/hint.gif') no-repeat 15px 100%;
  z-index:9999;
  }
.tip div {
  font:13px 'PT Serif', arial, serif;
  font-weight:700;
  padding:3px 6px 5px;
  background: #de5d12;
  color: #efefef;
  }

В нём настраиваем под себя цвета и изображение (можно взять здесь http://heroes.okis.ru/file/heroes/hint.gif)
Код:
  background:url('file/heroes/hint.gif') no-repeat 15px 100%; \\изображение под подсказкой
  background: #de5d12; \\цвет фона подсказки
  color: #efefef; \\цвет текста подсказки
  font:13px 'PT Serif', arial, serif; \\шрифт текста подсказки


2. Заливаем в Загрузка файлов изображение http://heroes.okis.ru/file/heroes/hint.gif

3. Устанавливаем код скрипта в Установка счетчиков, изменив некоторые параметры по своему вкусу:
Код:
<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>


С надеждой на понимание, Z.

_________________
Изображение
Геройский Портал - Герои Меча и Магии
Осуществляю услуги по дизайну сайтов системы OKIS (обращайтесь в ЛС)
Люди, любитесь (с)


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 15 авг 2011, 13:27 
Не в сети
Аватара пользователя

Зарегистрирован: 18 май 2011, 14:10
Сообщения: 11
Спасибо!


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 20 авг 2011, 14:34 
Не в сети

Зарегистрирован: 05 янв 2011, 21:43
Сообщения: 6
Спасибо)


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 21 мар 2012, 14:29 
Не в сети

Зарегистрирован: 21 мар 2012, 00:04
Сообщения: 27
спасибо


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 4 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron