Blog Informatizado

Caros leitores fica aqui uma dica muito boa sobre códicos de banner rotativo em java, para você fazer aplicação em seu site ou até mesmo em blog.

Vamos utilizar uma solução pronta e gratuita que está disponível, inclusive com exemplo, no site slayeroffice.com – imageCrossFade.

No caso deste exemplo, vamos precisar do seguinte:

xfade2.css

#imageContainer {
height:235px;
}

#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}

xfade2_o.css

#imageContainer {
position:relative;
margin:auto;
width:495px;
border:1px solid #000;
}

xfade2.js

/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html

*****/

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,1000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,8000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

O arquivo js vem com um aviso. Ele alerta para que o arquivo css esteja na mesma pasta do arquivo js. Se estiverem em arquivos separaros, é preciso indicar o caminho até o arquivo.

Esta linha controla o tempo de troca entre as imagens:

setTimeout(so_xfade,8000);

No caso, a cada 8 segundos a imagem é alterada.

E por último, no seu html, as imagens que serão alteradas:

<div id="imageContainer">
<img src="imagem1.jpg" width="495" height="235" alt="imagem">
<img src="imagem2.jpg" width="495" height="235" alt="imagem">
<img src="imagem3.jpg" width="495" height="235" alt="imagem">
<img src="imagem4.jpg" width="495" height="235" alt="imagem">
</div>

Agora é só testar e ver o resultado. Você também pode ajustar a altura e largura das imagens. Basta alterar o width e height dos atributos img e nos arquivos css.

vi no:http://www.mariosam.com/

• PHOTOSHOP: efeito desmanchando um rosto
• FLASH: movendo o fundo com o mouse (efeito)
• Colocando asas com o Photoshop
• Criar link para Download em HTML
• CorelDraw – efeito (sombra e profundidade)
• HTML: retirando o traço do link
• Pixel e suas características
• Banner Rotativo
• HTML: criando um banner Rotativo