Free Web Hosting by Netfirms
Web Hosting by Netfirms | Free Domain Names by Netfirms

   
 
Sección "Java Scripts"

Lección 51

Rotación de banners

Con este código podrás colocar varios banners en tu sitio, y en un mismo lugar, y los mismos se irán rotando, de manera que cada uno conduce a otra dirección. 

Es decir, haces click en el banner 1, te redirecciona a una dirección, haces click en el banner 2, te dedirecciona a otra dirección, etc.

Para lograr este efecto, pones la página en HTML, (Si usas el programa Front Page accionando la opción que se encuentra al pie de la página, sobre la izquierda), y copias el código que te escribo en la casilla de abajo, tal cual como está debajo de la palabra <Head>, que encontrarás en la parte superior de tu página.   

<script LANGUAGE="JavaScript">
<!-- Creador: Markus Fischer (mfischer@josefine.ben.tuwien.ac.at) -->
<!-- Sitio Web: http://josefine.ben.tuwien.ac.at/~mfischer/ -->

<!-- Comienza
var mfBanners = [
['http://webgasoleros.netfirms.com','s.468x60.gif'], 
['http://www.forosdelweb.com','s.468x60bis.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 3000);
// End -->
</script>

Lo que pinté con azul corresponde a las direcciones a las que conducen los banners, las cambias a gusto.

Con rojo pinté el nombre de los banners, para que el servidor los identifique y pueda subir a la página.  Los debes colocar en la misma carpeta donde guardas tu página, y luego los debes subir a tu servidor.

Luego pegas el siguiente código en el HTML de tu página, tal cual como está, en el sector que desees, pero siempre debajo de la palabra <Body>.

<div id="banner"></div>

Aquí copio nuevamente el código con opción para seleccionarlo, cortar y pegar en tu sitio.

Para ello haces click en cualquier palabra que se halla dentro de la caja, Te diriges a "Edición" en el menú superior de la barra de herramientas, e indicas "Seleccinar todo", luego tomas lo seleccionado dirigiéndote nuevamente a "Edición", pero esta vez indicas "Cortar", y posteriormente te posicionas en tu página, donde quieres colocar este código, entonces te diriges a Edición, y le indicas "Pegar". 

Si deseas hacer las cosas más rápido, puedes verificar en "Edición" (está escrito al lado de las palabras que indican cada orden) que pulsando "Control" + una letra determinada, puedes "seleccionar todo", "cortar" o "pegar" en forma instantánea y con eso evitas tener que ingresar constantemente al menú de "Edición".

Esto es lo que debes pegar donde dice <Head> en el HTML de tu página:

Esto es lo que debes pegar donde dice <Body> en el HTML de tu página:

Si de todos modos, no funciona este efecto, corta el código HTML que debes colocar en tu página, pero antes de hacerlo, pégalo en tu Block de notas, y luego si córtalo de allí y pégalo en tu sitio. Ahora si no creo que haya ningún inconveniente que te impida disfrutar de este bonito efecto.

Recordemos que este Script también puede ser hallado en el programa Depósito, el cual puedes bajar de aquí: webtutorial.com.ar

Buena suerte.