A veces, una sola imagen no es suficiente para mostrar todo lo que desea promocionar en su sitio. Si alguna vez te has preguntado cómo algunos sitios obtienen varias imágenes para rotar y te gustaría hacerlo tú mismo, bueno, no te preguntes más. Estoy aquí para mostrarte cómo se hace. Además, como beneficio adicional, le mostraré cómo puede actualizar sus imágenes en una ubicación y hacer que esas actualizaciones aparezcan globalmente en su sitio.
Digamos que tienes un sitio de cocina y quieres que las imágenes de las cinco comidas más recientes que has presentado giren en el banner. O, digamos que tiene un sitio de bienes raíces y desea que las imágenes de sus 10 listados más recientes roten en un lugar específico en todas sus páginas. Para agregar funcionalidad, desea que cada imagen se vincule a una página diferente. Todo esto no es un problema con el siguiente código.
Primero, tienes que organizarte. Reúne todas tus imágenes en la misma carpeta y asegúrate de que tengan el mismo tamaño. Si no son del mismo tamaño y no quiere distorsionar ellos, entonces simplemente cambiar el tamaño del lienzo de la imagen y no el tamaño de la imagen de sí mismo. De esta manera, el marcador de posición donde aparecen las imágenes no cambiará de forma a medida que aparezca cada imagen nueva.
En segundo lugar, recopile todos los enlaces que desee asociar con las imágenes y guárdelos en un lugar conveniente para que pueda copiarlos y pegarlos más tarde.
En tercer lugar, debe pegar lo siguiente en el encabezado de cada página en la que desee que aparezca el rotador de imágenes:
<script language="JavaScript1.2″>var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>
A primera vista, este código puede parecer intimidante. Sin embargo, todo lo que tiene que hacer es actualizar la ruta a los archivos de imagen y completar las URL de los enlaces. Por supuesto, también debe actualizar los atributos de altura y anchura para que se ajusten a su sitio.
Si solo desea que cuatro imágenes roten, simplemente elimine una de las filas de elementos. Si desea agregar uno, copie y pegue y actualice elementos a elementos, etc.
Ahora ha sentado las bases para agregar este rotador de imágenes a su sitio. Pero hay un paso más que debes hacer para que tus imágenes aparezcan en la página. Averiguar donde desea que aparezcan las imágenes en la página y copiar en:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Eso es todo allí está a él. Cuando empecé a trabajar en agregar un rotador de imágenes a mi sitio, no era tan fácil como copiar y pegar. Revisé varios ejemplos diferentes de código que encontré en línea. La mayoría de ellos no funcionaban. Este código anterior tampoco funcionó, pero luego hice algunos ajustes aquí y allá y logré que funcionara. Hice la parte difícil por ti. Ahora todo lo que tienes que hacer es actualizar tus imágenes y enlaces, copiar y pegar un poco, y listo.
Si decide usar este rotador de imágenes en varias páginas diferentes dentro de su sitio y luego necesita cambiar las imágenes y el contenido, puede hacerlo desde una ubicación. Sin embargo, esto requiere cierta planificación con anticipación. Volvamos al ejemplo de un sitio inmobiliario. Cuando guarde las imágenes, le recomiendo usar la misma convención para cada imagen ,por ejemplo, » Casa1.jpg » y » Casa2.jpg», y así sucesivamente. Luego, cuando desee mostrar una nueva serie de casas, simplemente nombre las nuevas imágenes con los mismos nombres de archivo que antes. De esa manera, todas tus páginas mostrarán las nuevas imágenes después de que el navegador borre la caché o actualices la página.
Lo mismo funciona para cada uno de los enlaces. Mi recomendación es nombrar a cada uno .archivo htm, » Casa1.htm » y » House2.htm», y así sucesivamente. De esta manera, todo lo que tienes que hacer es actualizar el contenido dentro de la .los archivos htm y los enlaces en el rotador de imágenes apuntarán automáticamente al nuevo contenido.