Página Inicial de WebUsable

Buscar:
Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Banner Rotatorio

Temas relacionados: Técnicas de optimización de imágenes para Web


En primer lugar tendremos diseñadas las imágenes que constituirán las fases del Banner Rotatorio. Es imprescindible que ambas tengan el mismo nombre, diferenciándose sólo en la última letra, que será el número de órden en la secuencia:

showbanner1.gif
showbanner1.gif
showbanner1.gif

Definimos un array de imágenes:

Banner_imganz=3;
var Banner_sctr=0;
var Banner_halt=0;
var Banner_rand=1;
var Banner_timeout=2000;
var Banner_isn=new Array();

if (document.images) {
for (i=0;i<Banner_imganz;i++) Banner_isn[i]=new Image();

Banner_isn[0].src="images/showbanner1.gif";
Banner_isn[1].src="images/showbanner2.gif";
Banner_isn[2].src="images/showbanner3.gif";
}
else {
Banner_isn[0]="images/showbanner1.gif";
Banner_isn[1]="images/showbanner2.gif";
Banner_isn[2]="images/showbanner3.gif";
}
var Banner_durl=new Array();
Banner_durl[0]="rec_si.htm";
Banner_durl[1]="rec_no.htm";
Banner_durl[2]="rec_access.htm";

Y la siguiente función javascript que gestionará la secuenciación de las imágenes del array:

function Banner_rotate(){
if (Banner_halt!=1){
if (Banner_rand==0) {Banner_sctr++;}
else {Banner_sctr=Math.floor(Math.random()*Banner_imganz);}
if (Banner_sctr>Banner_imganz-1) Banner_sctr=0;
if (document.images) {
document.Banner.src=Banner_isn[Banner_sctr].src;
} else {
document.Banner.src=Banner_isn[Banner_sctr];
}
setTimeout("Banner_rotate()",Banner_timeout);
}
}

function Banner_link(){
Banner_halt=1;
if (Banner_durl[Banner_sctr].length!=0) location.href=Banner_durl[Banner_sctr];
}
function Banner_status(){ parent.window.status=Banner_durl[Banner_sctr];}


Temas relacionados: Técnicas de optimización de imágenes para Web

 
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable