Javascript para rotar imágenes con hipervínculos

pabloe9k · #1 (**permalink**) 16/03/2011, 21:38

Hola, gente!
Necesito de su ayuda.
Para rotar una imagen estoy usando el siguiente código javascript:

Código:

<script>
	var cont = 0;
	var array_imagenes = [
		["deposito/banner_rotativo/imagen1.jpg"],
		["deposito/banner_rotativo/imagen2.jpg"]
	]
	function cambia()
	{
		var d = document.getElementById("banner_rotativo");
		cont = cont % array_imagenes.length;
		d.innerHTML = "<img border=0 src='"+array_imagenes[cont][0]+"'>";
		cont++;
	}
	
	function inicio()
	{
		cambia();
		setInterval(cambia, 5000);
	}
	//window.onload=inicio;  //este comando carga la función en el body con un "onload" 
</script>

La verdad es que funciona perfecto, pero me gustaría que cada imagen tuviera su propio hipervínculo (apuntando a sitios diferentes, obvio).

No se como editar este código.
Podrían ayudarme, por favor?

De antemano, muchas gracias, gente.

Saludos a todos.

Naahuel · #2 (**permalink**) 16/03/2011, 22:30

Podés poner en el array el código completo directamente, en lugar de sólo las rutas. Algo asi:

Código Javascript:

Ver originalvar array_imagenes = [
        ["<a href='www.sitio1.com'><img border=0 src='deposito/banner_rotativo/imagen1.jpg' /></a>"],
        ["<a href='www.sitio2.com'><img border=0 src='deposito/banner_rotativo/imagen2.jpg' /></a>"]
    ]

Y después agregarlo así:

Código Javascript:

Ver originald.innerHTML = array_imagenes[cont][0];

No lo he probado, pero debería funcionar.

pabloe9k · #3 (**permalink**) 17/03/2011, 07:08

Cita:

Iniciado por Naahuel

Podés poner en el array el código completo directamente, en lugar de sólo las rutas. Algo asi:

Código Javascript:

Ver originalvar array_imagenes = [
        ["<a href='www.sitio1.com'><img border=0 src='deposito/banner_rotativo/imagen1.jpg' /></a>"],
        ["<a href='www.sitio2.com'><img border=0 src='deposito/banner_rotativo/imagen2.jpg' /></a>"]
    ]

Y después agregarlo así:

Código Javascript:

Ver originald.innerHTML = array_imagenes[cont][0];

No lo he probado, pero debería funcionar.

Gracias por la respuesta pero lamentablemente no funciona.
Probé con tu código, pero directamente no cargan las imágenes.

Que podrá ser?

Naahuel · #4 (**permalink**) 17/03/2011, 07:40

A mi me funciona a la perfección hombre. ¿Te fijaste de hacer los dos cambios que te dije?
Acá lo podés ver funcionando:

http://jsbin.com/ijoki4

Este es código del ejemplo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
  <script>
    var cont = 0;
  var array_imagenes = [
    ["<a href='http://www.lossimpsons.com'><img border=0 src='http://4.bp.blogspot.com/_2R9QTEVhHfI/TL8ywnPjuGI/AAAAAAAAAuE/whHCzbNOCjo/s1600/888fb70c4jukgrm8a649e07f89e26a6_homer-j-simpson.png' /></a>"],
        ["<a href='http://www.fox.com/familyguy/'><img border=0 src='http://t2.gstatic.com/images?q=tbn:ANd9GcR8uT182YzeWvuKjkbI5iQ3_1YNTfOD5mJMrW7CAMoJnasSK81V&t=1' /></a>"]
    ]
  function cambia()
  {
    var d = document.getElementById("banner_rotativo");
    cont = cont % array_imagenes.length;
    d.innerHTML = array_imagenes[cont][0];
    cont++;
  }
  
  function inicio()
  {
    cambia();
    setInterval(cambia, 5000);
  }
 </script>
</head>
<body onload="inicio();">
  <div id="banner_rotativo"></div>
</body>
</html>

Las imagenes rotan y cada una con un link diferente.