• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Как затемнить баннеры (делаем прозрачные баннеры)
Как затемнить баннеры
Aleko
Дата: Пятница, 04.09.2009, 14:54 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Эта тема - маленький промоут ^_^ так как уже много где я находил подобный вопрос о моих баннерах справа сверху. Итак, у нас есть вот такой баннер:

И его код:

Code
<img src='http://studioad.ru/ads.gif'>

Для того, чтобы сделать его прозрачным, нам нужно добавить 2 стиля - opacity для всех браузеров и filter:alpha для Internet Explorer. Вставляем код вот так:

Code
<img src="http://studioad.ru/ads.gif" style="opacity:0.5;filter:alpha(opacity=50)">

В коде в параметре opacity прозрачность указывается в интервале от 1 и до нуля, а в filter:alpha от 100 и до нуля. В итоге мы получаем:

Для того чтобы сделать так, чтобы наш баннер становился видимым при наведении мышки, используйте такой код:

Code
<img src="http://studioad.ru/ads.gif" style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.cssText='opacity:1;filter:alpha(opacity=100)'" onmouseover="this.style.cssText='opacity:0.5;filter:alpha(opacity=50)'">

Вот что получится:

Если же вы хотите плавного появления и исчезновения, можно попробовать сделать так:

Code
<img src="http://studioad.ru/ads.gif" style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="show(this,1)" onmouseout="show(this,0.5)">
<script>
function show(o,p,st){
     var op,steps,t,step;
     t=[];op=[];step=[];steps=[];
     steps[o]=20;
     step[o]=(p-o.style.opacity)/steps[o];
     if(t[o]){clearInterval(t[o])}
     t[o] = setInterval(function(){if(steps[o]>0){
      op[o] = o.style.opacity*1+step[o];
      o.style.opacity=op[o];
      o.style.filter='alpha(opacity='+op[o]*100+')';
      steps[o]--;
      }else{
      clearInterval(t[o])
      }},1);
     }
</script>

В итоге:

*Последний способ намалеван на скорую руку и может вести расчеты не точно, хотя и кроссбраузерен.


Бесплатные обои.
  
n1ght(o_O)
Дата: Пятница, 04.09.2009, 22:40 | Сообщение # 2
говорун
Группа: Проверенные
Пользователь №: 10
Сообщений: 180
Получено оценок: 6
o_O вот за это огромное спасибо! king
  
IMpulse
Дата: Суббота, 05.09.2009, 12:19 | Сообщение # 3
Группа: Удаленные
вроде бы и просто, но прикольно.Спасибо большое [за последний вариант].
  
ColdFire
Дата: Суббота, 05.09.2009, 23:18 | Сообщение # 4
говорун
Группа: Проверенные
Пользователь №: 85
Сообщений: 123
Получено оценок: 7
Aleko, как всегда на высоте, спасибо!
  
tomas686
Дата: Вторник, 22.09.2009, 15:31 | Сообщение # 5
шептун
Группа: Проверенные
Пользователь №: 18
Сообщений: 90
Получено оценок: 1
Aleko, а с $COUNTER$ как?
  
DSC
Дата: Вторник, 22.09.2009, 16:14 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Code
<div style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="show(this,1)" onmouseout="show(this,0.5)">$COUNTER$</div>
<script>
function show(o,p,st){
      var op,steps,t,step;
      t=[];op=[];step=[];steps=[];
      steps[o]=20;
      step[o]=(p-o.style.opacity)/steps[o];
      if(t[o]){clearInterval(t[o])}
      t[o] = setInterval(function(){if(steps[o]>0){
       op[o] = o.style.opacity*1+step[o];
       o.style.opacity=op[o];
       o.style.filter='alpha(opacity='+op[o]*100+')';
       steps[o]--;
       }else{
       clearInterval(t[o])
       }},1);
      }
</script>

попробуй так, должно сработать)


aka Latro
  
vladko95
Дата: Вторник, 22.09.2009, 19:56 | Сообщение # 7
говорун
Группа: Проверенные
Пользователь №: 51
Сообщений: 121
Получено оценок: 6
вау за последний способ спасибо
  
wangog
Дата: Вторник, 01.12.2009, 17:10 | Сообщение # 8
молчун
Группа: Проверенные
Пользователь №: 113
Сообщений: 10
Слухай народ а каким образом тогда можна сделать полупразрачным целый блок ?!
  
OnMusic
Дата: Вторник, 01.12.2009, 17:55 | Сообщение # 9
говорун
Группа: Проверенные
Пользователь №: 120
Сообщений: 158
Получено оценок: 11
также как и коунтер..
  
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Как затемнить баннеры (делаем прозрачные баннеры)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.