Эта тема - маленький промоут так как уже много где я находил подобный вопрос о моих баннерах справа сверху. Итак, у нас есть вот такой баннер:
И его код:
Code
1 <img src='http://studioad.ru/ads.gif' >
Для того, чтобы сделать его прозрачным, нам нужно добавить 2 стиля - opacity для всех браузеров и filter:alpha для Internet Explorer. Вставляем код вот так:
Code
1 <img src="http://studioad.ru/ads.gif" style="opacity : 0.5 ; filter : alpha(opacity=50) " >
В коде в параметре opacity прозрачность указывается в интервале от 1 и до нуля, а в filter:alpha от 100 и до нуля. В итоге мы получаем:
Для того чтобы сделать так, чтобы наш баннер становился видимым при наведении мышки, используйте такой код:
Code
1 <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
1 <img src="http://studioad.ru/ads.gif" style="opacity : 0.5 ; filter : alpha(opacity=50) " onmouseover="show(this,1)" onmouseout="show(this,0.5)" > 2 <script> 3 function show( o,p,st) { 4 var op,steps,t,step; 5 t= [ ] ;op= [ ] ;step= [ ] ;steps= [ ] ; 6 steps[ o] = 20 ; 7 step[ o] = ( p- o.style.opacity) / steps[ o] ; 8 if ( t[ o] ) { clearInterval( t[ o] ) } 9 t[ o] = setInterval ( function( ) { if ( steps[ o] > 0 ) { 10 op[ o] = o.style.opacity* 1 + step[ o] ; 11 o.style.opacity= op[ o] ; 12 o.style.filter= 'alpha(opacity=' + op[ o] * 100 + ')' ; 13 steps[ o] - - ; 14 } else { 15 clearInterval( t[ o] ) 16 } } ,1 ) ; 17 } 18 </script>
В итоге:
* Последний способ намалеван на скорую руку и может вести расчеты не точно, хотя и кроссбраузерен.
Бесплатные обои.