Эта тема - маленький промоут так как уже много где я находил подобный вопрос о моих баннерах справа сверху. Итак, у нас есть вот такой баннер:
И его код:
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>
В итоге:
*Последний способ намалеван на скорую руку и может вести расчеты не точно, хотя и кроссбраузерен.