Problema con un array

b44 · #1 (**permalink**) 14/05/2014, 04:46

Hola tengo el siguiente array
En el <head> tengo el siguiente script

Código:

 <!-- Rotacion de cuatro imagenes  tiempo 4 segundos de transicion -->
<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(180,45) 
array_imagen[0].src = "1.jpg"
array_imagen[1] = new Image(180,45) 
array_imagen[1].src = "2.jpg"
array_imagen[2] = new Image(180,45)
array_imagen[2].src = "3.jpg"
array_imagen[3] = new Image(180,45)
array_imagen[3].src = "4.jpg"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "ones.html"
array_url[1] = "dcivil.html"
array_url[2] = "salida.html"
array_url[3] = "civil.html"

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_imagen(){
    window.document["funcionimagen"].src = array_imagen[contador].src
    window.document.links[0].href = array_url[contador]
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_imagen()",4000)
} 
</script>

y en el <body> tengo el siguiente codigo

Código:

 
<body onload="alternar_imagen()">
  <a href="" ><img src="melacion.jpg" name="funcionimagen" alt="cambio de imagen"></a>

codigo css

Código:

.desvanecer{
position:relative;
height:45px;
margin:0px;
width:180px;
 }
.desvanecer img{
opacity:1.0;
left: 0px;
position:absolute;
top: 0px;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 180px;
height: 45px;
background: transparent;
padding: 5px;
border: solid 1px gray;
border-radius:5px;
}

Con este array intento:
1.- Que pasen cuatro fotos cada cuatro segundos
2.- Que a cada fotografia que pase se le asigne un enlace previo del segundo array es decir el "array_url"
3.- Que las fotografias tengan algo de opacidad a iniciarse

Problemas que me surgen:
1.- Si valido la pagina el codigo html me indica que

Código HTML:

name="funcionimagen"

no es valido y que debo cambiarlo por id="funcionimagen", con id no me rotan las imagenes.

2.- Los enlaces del array_url que le asigno a cada imagen no funcionan o se confunden con otros enlaces de la pagina o no funcionan.

3.- No funcionan la opacidad de las fotografias.

Ruego algo de ayuda se me han acabado las ideas

b44 · #2 (**permalink**) 14/05/2014, 05:16

He estado mirando y me funciona en firefox pero en internet explorer me derror al cargar la linea 83

Código:

 window.document["funcionimagen"].src = array_imagen[contador].src

tampoco me funciona en chrome

Triby · #3 (**permalink**) 14/05/2014, 05:23

Código HTML:

Ver original<body onload="alternar_imagen()">
  <a href="" id="imglink"><img src="melacion.jpg" id="funcionimagen" alt="cambio de imagen"></a>

En la función:

Código Javascript:

Ver originalvar img = document.getElementById("funcionimagen");
    img.src = "Aquí la nueva imagen";
    var link = document.getElementById("imglink");
    link.href = "Aquí el nuevo href";

Lo de las transiciones deberás preguntar en el foro de CSS

b44 · #4 (**permalink**) 14/05/2014, 07:23

El codigo html lo entiendo perfectamente

Código:

 <a href="" id="imglink"><img src="melacion.jpg" id="funcionimagen" alt="cambio de imagen"></a>

pero con el codigo javasscript no se si te refieres a esto si es asi no funciona, solo aparece una imagen con su enlace correspondiente. No cambia cada cuatro segundos

Código:

<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(180,45) 
array_imagen[0].src = "1.jpg"
array_imagen[1] = new Image(180,45) 
array_imagen[1].src = "2.jpg"
array_imagen[2] = new Image(180,45)
array_imagen[2].src = "3.jpg"
array_imagen[3] = new Image(180,45)
array_imagen[3].src = "4.jpg"
//creo el array de URLs
array_url = new Array(4)
array_url[0] = "iones.html"
array_url[1] = "acivil.html"
array_url[2] = "salida.html"
array_url[3] = "civil.html"
//variable para llevar la cuenta de la imagen siguiente
contador = 0
//función para rotar el banner
function alternar_imagen(){
	var img = document.getElementById("funcionimagen");
        img.src = "1.jpg";
        var link = document.getElementById("imglink");
        link.href = "civil.html";
	var img = document.getElementById("funcionimagen");
        img.src = "2.jpg";
        var link = document.getElementById("imglink");
        link.href = "salida.html";
	var img = document.getElementById("funcionimagen");
        img.src = "3.jpg";
        var link = document.getElementById("imglink");
        link.href = "frecivil.html";
	var img = document.getElementById("funcionimagen");
        img.src = "4.jpg";
        var link = document.getElementById("imglink");
        link.href = "aasalida.html";
    window.document["funcionimagen"].src = array_imagen[contador].src
    window.document.links[0].href = array_url[contador]
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_imagen()",4000)
} 
</script>

Italico76 · #5 (**permalink**) 14/05/2014, 07:25

El problema que refieres de que se "confunden los enlaces" tiene que ver con que las imagenes siguen rotando pero el navegador coje un enlace cuando te colocas sobre la imagen.

Esto se solucionaria deteniendo la rotacion cuando te colocas sobre la imagen (onmouseover) y reanudandola cuando sales de ella (onmouseout)

Aca la solucion a ese problema en especial (probado):

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Rotación de banners con Javascript</title>   
<script>
 
var estado = true;
 
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,60)
array_imagen[0].src = "images/lentejas.jpg"
array_imagen[1] = new Image(120,60)
array_imagen[1].src = "images/plato-presentado.jpg"
array_imagen[2] = new Image(120,60)
array_imagen[2].src = "images/Salsa-de-cebolla-con-tomate.jpg"
array_imagen[3] = new Image(120,60)
array_imagen[3].src = "images/compuesto-de-varias-frutas.jpg"
 
//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.cocina.com"
array_url[1] = "http://www.elgurmet.com/"
array_url[2] = "https://www.google.com.co/search?q=cocinando"
array_url[3] = "http://www.culinario.net"
 
//variable para llevar la cuenta de la imagen siguiente
contador = 0
 
//función para rotar el banner
function alternar_banner()
{
    var timer 
    
    console.log('Estado es '+estado)
    
    if (estado) 
    {
        window.document["banner"].src = array_imagen[contador].src
        window.document.links[0].href = array_url[contador]
        contador ++
        contador = contador % array_imagen.length
        timer = setTimeout("alternar_banner();",1500)
    }else
        clearTimeout(timer)
}
 
               // cross-browser
        function addEventHandler(elem,eventType,handler)
        {
            if (elem.addEventListener) 
                elem.addEventListener (eventType,handler,false);
            else 
                if (elem.attachEvent) elem.attachEvent ('on'+eventType,handler); 
        }
        
        // cross-browser
        function removeEventHandler(elem,eventType,handler)
        {       
            if (elem.removeEventListener) 
                elem.removeEventListener (eventType,handler,false);
                
            if (elem.detachEvent)
                elem.detachEvent ('on'+eventType,handler); 
        }
        
        // Mis handlers
        function handlerFunction1() {estado=false;}
        function handlerFunction2() { estado=true;alternar_banner(); }
                
        
        function init() {       
            addEventHandler(document.getElementById('imagen'),'mouseover',handlerFunction1);  // desactiva rotacion 
            
            addEventHandler(document.getElementById('imagen'),'mouseout',handlerFunction2);  // activa rotacion
            
            alternar_banner();          
        }
    
</script>
</head>
 
<body onload="init();">
 
<a href=""><img src="" name="banner" width=120 height=60 border=0 id="imagen" ></a>
 
 
</body>
</html>

Logicamente necesitas las imagenes que aparecen ahi y en el path en que sean accesibles (en mi caso las puse en ./images)

Triby · #6 (**permalink**) 14/05/2014, 16:10

Amigo, era solo un ejemplo y creí que quedabla más o menos claro:

Código Javascript:

Ver originalfunction alternar_imagen(){
    var img = document.getElementById("funcionimagen");
    img.src = array_imagen[contador].src;
    var link = document.getElementById("imglink");
    link.href = array_url[contador];
    // Revisa la forma en que incrementas el contador
    contador ++;
    contador = contador % array_imagen.length;
    setTimeout("alternar_imagen()",4000);
}

Por cierto, eso de no poner punto y coma al final de cada sentencia te debería generar un error.

Italico76 · #7 (**permalink**) 14/05/2014, 16:48

Cita:

Iniciado por Triby

Por cierto, eso de no poner punto y coma al final de cada sentencia te debería generar un error.

Compa : el punto y coma al final de cada sentencia en opcional en JS pero ayuda a la legibilidad y le facilita las cosas al interprete como comentan aqui

Creo que los que pasamos mucho tiempo en PHP, C, C++ ...etc no podemos con la costumbre!

---
PD: en otros lenguajes como Python el (;) no se utiliza tampoco pero se apoya en una identacion forzosa tambien para simplificarle la vida al pobre interprete

Triby · #8 (**permalink**) 14/05/2014, 17:18

Cierto, "en teoría" son opcionales, sin embargo:

Cita:

There's been a lot of debate over semicolons in JavaScript. Semicolons aren't required due to the nature of JavaScript's automatic semicolon insertion, but they've been been considered a best practice for years.

Para evitar errores, es mejor especificar por uno mismo donde acaba una sentencia y no dejar que el motor intente adivinarlo.

Italico76 · #9 (**permalink**) 14/05/2014, 20:28

@Triby: sobre el tema de los (;) quiero agregar un comentario final:

Código Javascript:

Ver originalif (condicion)
    instruccion   // se ejecuta condicional (bien)

pero..

Código Javascript:

Ver originalif (condicion);
    sentencia   // se ejecuta siempre (mal)

y

Código Javascript:

Ver originalif (condicion);
   sentencia   // se ejecuta siempre (mal)
else // <<< cuack! error!  
   sentencia

O sea.. un (;) mal puesto es lo mismo que en PHP por mencionar otro lenguaje, que hace la estructura de control quede "trunca" (se corte en ese punto)