Enlaces en rotador

[kaninox]

holas, les cuento, tengo un rotador de imagenes que las va cambiando cada x tiempo 3 segundos, hasta aqui todo ok, pero quiero agregar un enlace a cada imagen? como puedo modificar el codigo del aray supongo para lograrlo? ....
mi fuerte no es el javascript...

Código javascript:

<script type="text/javascript">
var bannerImg = new Array();
  bannerImg[0]="4.gif";
  bannerImg[1]="1.gif";
  bannerImg[2]="2.gif";
  bannerImg[3]="3.gif";
 
 
var newBanner = 0;
var totalBan = bannerImg.length;
 
function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 3*1000);
}
window.onload=cycleBan;
</script>
 
<img src="4.gif" name="banner" />
 

[SergeMedina]

Código javascript:

<script type="text/javascript">
var bannerImg = new Array();
  bannerImg[0]="4.gif";
  bannerImg[1]="1.gif";
  bannerImg[2]="2.gif";
  bannerImg[3]="3.gif";
 
 
var newBanner = 0;
var totalBan = bannerImg.length;
 
function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  document.getElementById('miLink').href='url';
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 3*1000);
}
window.onload=cycleBan;
</script>
 
<img src="4.gif" name="banner" />
<a href="" id="miLink">Llevame a algún lugar</a>
 

[kaninox]

gracias, pero eso me agrega un solo link para todas las imagenes, mi idea es un link para cada imagen distinto espero se entienda

saludos y gracias...

[zerokilled]

una forma podria ser teniendo dos arrays, uno para enlaces y otro para rutas de imagenes. entonces, asumiendo que la imagen esta dentro de un <a>, podrias ubicar una linea similar a la siguiente luego de la #17 (en el codigo original de @kaninox)

Código:

document.banner.parentNode.href=bannerLink[newBanner];
// siendo bannerLink el array de enlaces;

[kaninox]

al poner tal linea ya no me va el rotador :/

[zerokilled]

varias cosas que tienes que velar :

• recuerda que tienes que definir el array de enlaces. cada enlace va a la par con el mismo orden de imagenes. y el valor de cada elemento tiene que ser un string. ejemplo, bannerLink = new Array("http...", "www.dominio", ...);
• la imagen tiene que ser directamente padre del enlace. o sea, <a ...><img .../></a>

si aun no te sigue funcionando, citanos el error que muestra la consola de errores.

[kaninox]

mi fuerte claramente no es javascript :(
pero comento que encontré este código que hace lo que necesito, pero la otra parte poner imagen y el enlace... entonces como le agrego un timeout o algo que me las cambie cada cierto tiempo y no cada ves que la web se recargue???

saludos...

Código javascript:

<script language="JavaScript">
image = new Array(2);
link = new Array(2);
image[0] = '1.gif'
image[1] = '2.gif'
image[2] = '3.gif'
link[0] = 'http://www.google.com'
link[1] = 'http://www.yahoo.com'
link[2] = 'http://www.altavista.com'
index = Math.floor(Math.random() * image.length);
document.write("<A HREF="+link[index]+">");
document.write("<IMG SRC="+image[index]+" border='0'></A>");
</script>
 

[zerokilled]

con el codigo inicial no tenias que hacer muchos cambios. era cuestion de definir un nuevo array y agregar una linea a la funcion. pues la funcion ya tenia lo necesario para rotar las imagenes. usando el ejemplo de @SergeMedina,

Código:

<script type="text/javascript">
var bannerImg = new Array();
  bannerImg[0]="4.gif";
  bannerImg[1]="1.gif";
  bannerImg[2]="2.gif";
  bannerImg[3]="3.gif";
 
link = new Array();
link[0] = 'http://www.google.com'
link[1] = 'http://www.yahoo.com'
link[2] = 'http://www.altavista.com'
 
var newBanner = 0;
var totalBan = bannerImg.length;
 
function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  document.getElementById('miLink').href=link[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 3*1000);
}
window.onload=cycleBan;
</script>
 
<img src="4.gif" name="banner" />
<a href="" id="miLink">Llevame a algún lugar</a>

admito que no lo he comprobado pero teoricamente debe funcionar.

[kaninox]

y claro que funciona te has ganado tu estatua :)
muchas gracias por tu tiempo man se agradece

saludos...

[kaninox]

Aquí molestando nuevamente, una pregunta :
que tendría que agregarle para que las imágenes hicieron algún tipo de efecto fade por ejemplo al cambiar a otra???

saludos y gracias.

[zerokilled]

ya eso es mas complicado, la forma mas facil es usando una libreria pero no te puedo ayudar al respecto porque no trabajo con ellas. pero nada, dos cosas: busca por la web por librerias de animacion como mootools, no se si jquery tambien tenga para hacer efectos. en el subforo de framework tambien te pueden ayudar.

[deirdre]

Hola kaninox

Yo no conozco la forma de agregarle 'fade' al estupendo arreglo que te ha hecho zerokilled en tu javascript, pero recuerdo tener una sencilla galería que cumple con lo que pides y que, por suerte, pesa muy poco. En una ocasión la utilicé y resultó muy bien. Hace 'fade' entre imágenes y cada una de ellas es clickeable (a direcciones distintas).

Si sigues estando interesado, la puedo buscar y subirla.

Bye

[kaninox]

si la pudieras subir estaría agradecido....

[deirdre]

Hola...

Aquí la tienes.

A destacar:
- Su bajo peso (sin imágenes, el js, css y html: 11.4 KB)
- Uso de ajax para la carga de imágenes
- Fácil implementación y edición

Bye

[kaninox]

genial gracias vamos a probarla, saludos

edito : lo probé y esta mas que genial se agradece un montón....

[summaky]

Hola amigos, yo tambien he bajado ese rotador y quisiera preguntarle a deirdre si es posible que sobre las fotos apareciera algun titular o texto en general. Me interesa utilizarlo con ese añadido.

Muchas gracias.

[deirdre]

Hola...

Es bien fácil... no es necesario tocar el javascript, es sólo cuestión de añadir un poco de css para agregar texto por encima de las imágenes en este rotador-galería.

En la hoja de estilo añade esto (o lo colocas dentro de head):

Código HTML:

<style type="text/css">
a {
	text-decoration: none;
}
.rotulos {
	position: absolute;
	left: 15px;
	top: 10px;
	z-index: 10;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#ffc;
	cursor: pointer;
	display: block;
}
</style> 

Y en el html se añade el texto de esta forma:

Código HTML:

 <div class="contentdiv">
		<div class="caja">
			<a href="http://www.enlace-1.com">
				<img alt="" src="images/foto1.jpg" width="400" />
					<span class="rotulos">Comentario para la foto 1</span>
			</a>
		</div>
	</div> 

y así sucesivamente para cada imagen. Como verás es muy sencillo.

Bye

[summaky]

Muchas gracias. Me ha funcionado perfectamente.