Rotador de imágenes
Hola, a ver si me puedes ayudar.
Tengo una función en JavaScript, que lo que hace es rotar las imágenes. Lo que quiero conseguir es poner un descripción a cada foto y que esta cambie también.
El código de la función es:
<html>
<head>
<title>Rotación de banners con Javascript</title>
<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,41)
array_imagen[0].src = "./imagenes/oruña2.jpg"
array_imagen[1] = new Image(120,41)
array_imagen[1].src = "./imagenes/oruñaeste.jpg"
array_imagen[2] = new Image(120,41)
array_imagen[2].src = "./imagenes/P1010028.jpg"
//creo el array de URLs
//array_url = new Array(4)
//array_url[0] = "http://www.salvarpatrimonio.org/"
//array_url[1] = "http://www.guiarte.com/"
//array_url[2] = "http://www.estiloymoda.com/"
//array_url[3] = "http://www.websitealbum.com/"
//variable para llevar la cuenta de la imagen siguiente
contador = 0
//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
//window.document.links[0].href = array_url[contador]
contador ++
contador = contador % array_imagen.length
setTimeout("alternar_banner()",1000)
if(contador == 3){contador = 0}
} </script>
</head>
<body onload="alternar_banner()">
<img src="#" name="banner" width=200 height=200 border=1>
</body>
</html>
Muchísimas gracias!
Tengo una función en JavaScript, que lo que hace es rotar las imágenes. Lo que quiero conseguir es poner un descripción a cada foto y que esta cambie también.
El código de la función es:
<html>
<head>
<title>Rotación de banners con Javascript</title>
<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,41)
array_imagen[0].src = "./imagenes/oruña2.jpg"
array_imagen[1] = new Image(120,41)
array_imagen[1].src = "./imagenes/oruñaeste.jpg"
array_imagen[2] = new Image(120,41)
array_imagen[2].src = "./imagenes/P1010028.jpg"
//creo el array de URLs
//array_url = new Array(4)
//array_url[0] = "http://www.salvarpatrimonio.org/"
//array_url[1] = "http://www.guiarte.com/"
//array_url[2] = "http://www.estiloymoda.com/"
//array_url[3] = "http://www.websitealbum.com/"
//variable para llevar la cuenta de la imagen siguiente
contador = 0
//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
//window.document.links[0].href = array_url[contador]
contador ++
contador = contador % array_imagen.length
setTimeout("alternar_banner()",1000)
if(contador == 3){contador = 0}
} </script>
</head>
<body onload="alternar_banner()">
<img src="#" name="banner" width=200 height=200 border=1>
</body>
</html>
Muchísimas gracias!
1 respuesta
Respuesta de Marcelo Origoni
1
Si
Entonce tu body debería verse algo así como
<body onload="alternar_banner()">
<img src="#" name="banner" width=200 height=200 border=1>
<div id="descrip"></div>
</body>
y la funcion alternar_banner, algo así
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
//window.document.links[0].href = array_url[contador]
window.document.getElementById('descrip').innerHTML = array_desc[contador];
contador ++;
contador = contador % array_imagen.length
setTimeout("alternar_banner()",1000)
if(contador == 3){contador = 0}
}
Y por supuesto, tienes que declarar el array array_desc, con las descripciones que quieras poner.
Marcelo
<body onload="alternar_banner()">
<img src="#" name="banner" width=200 height=200 border=1>
<div id="descrip"></div>
</body>
y la funcion alternar_banner, algo así
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
//window.document.links[0].href = array_url[contador]
window.document.getElementById('descrip').innerHTML = array_desc[contador];
contador ++;
contador = contador % array_imagen.length
setTimeout("alternar_banner()",1000)
if(contador == 3){contador = 0}
}
Y por supuesto, tienes que declarar el array array_desc, con las descripciones que quieras poner.
Marcelo
