el "+" no me concatena las cadenas ¿Por qué?

[ASCENDEDMASTERS]

Hola, estoy haciendo una galería dinamica de fotos.

este es el codigo:

Código PHP:

  <?

var img_vp=["foto1.jpg","foto2.jpg","foto3.jpg"];
var img_cant=img_vp.length;

var temporal=0;

var dir="vp/imagenes/";
//Ruta al directorio de las imagenes

//esta funcion se ejecuta con el onload del body, pone la primer foto
function ini(){
    document.getElementById('fotelis').style.backgroundImage="url(imagenes"+ img_vp[0] + ")";
}


//esta es la que hace el cambio de fotos
function cambiaf(b){
    if(b==1){
        if((window["temporal"]+1)==window["img_cant"]){
            window["temporal"]=0;
        }
        else{
            window["temporal"]++;
        }
    }
    else{
        if((window["temporal"]-1)<0){
            window["temporal"]=(window["img_cant"]-1);
        }
        else{
            window["temporal"]--;
        }
        
    }
    var u=window["temporal"];
document.getElementById('fotelis').style.backgroundImage="url(vp/imagenes/"+ img_vp[u] + ")";
document.getElementById(ver).innerHTML="<font color=#FFFFFF>"+document.getElementById(fotelis).style.backgroundImage+"</font>";
}
?>   

el problema es que me funcionaba perfecto igualando asi

.backgroundImage="url(vp/imagenes/" + img_vp[u] + ");" y no se que cambio hice o que paso que con la variable dir que contiene la ruta hasta el directorio imagenes, se concatena todo bien cuando hago

dir+img_vp[u]

pero no me pone la foto de fondo, no entiendo el problema. El tag de la celda es asi:

<td id='fotelis' style="background: url(imagenes) no-repeat center center">

le puse imagenes ahi como para ponerle algo, pero no se si funcionaría todo esto sin poner el style en el tag mismo.

luego hay otro td que es para ver como se asigna todo

<td id="ver">

la asignacion se hace perfecta pero no entiendo porque no funciona en firefox ni IE.


Esperando una ayuda, saludo Atte, Leonardo de Argentina


PD: Perdon por el titulo, es lo que pensaba pero luego mientras escribía el mensaje comprobe que no era la concatenacion el problema.

[caricatos]

Hola:

Si la celda no tiene contenido, deberías asihnarle al menos la altura de la imágen que quieres mostrar (height: 100px) y tal vez debas controlar también la anchura.

Ante la duda, dale un borde para ver los tamaños.

Saludos

[derkenuke]

Lo mejor que puedes hacer es alertar el
.style.backgroundImage
para ver si está correcto y existe la ruta.

Por comentarlo, ¿no se escribe más correctamente así?
style="background-image: url('imagen.jpg');"
¿o sólamente hay que poner comillas si el nombre del archivo contiene espacios en blanco?


Saludos.

[caricatos]

Iniciado por derkenuke

Por comentarlo, ¿no se escribe más correctamente así?
style="background-image: url('imagen.jpg');"
¿o sólamente hay que poner comillas si el nombre del archivo contiene espacios en blanco?


Saludos.

Decididamente NO. No debe entrecomillarse lo que se pone dentro de los paréntesis, y si llevase blancos se puede usar el signo más (que suele poner php) o "%20 " (sin las comillas)... ante la duda siempre se puede obtener la cadena con la función escape()

Saludos

[ASCENDEDMASTERS]

caricatos, dentro de la celda de la tabla esta puesto un gif transparente estirádo a 400x300 asique por ver la imagen no se hagan problema, debería verse perfectamente. Where is the problem?

[caricatos]

Hola:

Pues prueba temporalmente con un tag img... si se muestra o no, podrías desde las propiedades de la imagen (creo que todos los navegadores permiten verlas) podrías descubrir el problem

Saludos

[ASCENDEDMASTERS]

nada caricatos, eso probe mira asi cambiando y poniendo esto:

<img name="foteli" src="imagen_inicio.jpg">

y luego cambie esto:

Código PHP:

  document.getElementById('fotelis').style.backgroundImage="url(vp/imagenes/"+ img_vp[u] + ")"; 
   

por esto otro

Código PHP:

  document.foteli.src=dire+img_vp[u]; 
   

y naranja, no funciona. que tengo mal?

[ASCENDEDMASTERS]

este codigo nose que tiene que no funciona en firefox ni IE (en IE me aparece el triangulito amarillo abajo a la izquierda, algo mal debe haber)

Código PHP:

  var img_vp=["SaintGermain002.jpg","foto_horizontal_con_matriz.jpg"];
var img_cant=2;
var temporal=0;
 
 
var dir="vp/imagenes/";
 
function ini(){
    document.getElementById('fotelis').style.backgroundImage="url(http://imagesforum.doctissimo.fr/mesimages/1676940/hola.gif);"
    return;
}
 
function cambiaf(b){
    if(b==1){
        if((window["temporal"]+1)==window["img_cant"]){
            window["temporal"]=0;
        }
        else{
            window["temporal"]++;
        }
    }
    else{
        if((window["temporal"]-1)<0){
            window["temporal"]=(window["img_cant"]-1);
        }
        else{
            window["temporal"]--;
        }
        
    }
    var u=window["temporal"];
    //document.foteli.src=dir+img_vp[u];
    document.getElementById('fotelis').style.backgroundImage="url("+dir+img_vp[u]+")";
    document.getElementById("ver").innerHTML=document.foteli.src;
    
} 
   

en firefox pone la foto al inicio la funcion ini cuando la carga el onload pero cuando apreto este boton

<input type="button" value="cambiar foto" onclick="cambiaf(1)"> no cambia nada, desaparece la foto pero no pone ningúna


, pero en IE naranja, no funciona nada de nada

[caricatos]

Hola:

Me parece que el error está en el código que no muestras... document.foteli.src no se vé, y donde aplicas el fondo es en fotelis (plural)...

por cierto, el cálculo que haces lo veo un poco complejo... prueba esta línea:

Código:

temporal = (temporal + b + img_vp.length) % img_vp.length;

El estilo del ini no debe terminar en punto y coma... hay un atributo src en fotelis, como si fuese un marco o una imagen...

Te paso un código que funciona:

Código:

<html>
<head>
<script>
var img_vp=["miemoticon.gif","tintero.gif","utensillos.gif"]; 
var img_cant=2; 
var temporal=0; 
var dir="../dibujos/"; 
function ini(){ 
    document.getElementById('fotelis').style.backgroundImage="url(http://imagesforum.doctissimo.fr/mesimages/1676940/hola.gif)" 
} 

function cambiaf(b){ 
temporal = (temporal + b + img_vp.length) % img_vp.length;
    document.getElementById('fotelis').style.backgroundImage="url("+dir+img_vp[temporal]+")"; 
    document.getElementById("ver").innerHTML = temporal; 
}  
window.onload=ini;
</script>
</head>
<body>
<input type="button" value="cambiar más" onclick="cambiaf(1)">
<input type="button" value="cambiar menos" onclick="cambiaf(-1)">

<div style="height: 150px; width: 150px; background-color: #eeeeee" id="fotelis" ></div>
<div id="ver" ></div>
</body>
</html>

Saludos

[ASCENDEDMASTERS]

ya encontre cual era el problema. Tenia la ruta sin "/" al inicio, osea tenia "vp/imagenes" en lugar de "/vp/imagenes"

Gracias caricatos! y derkenuke! por ayudarme

[ASCENDEDMASTERS]

ahora el tema es que tarda un poquito en poner la foto, como puedo hacer para poner algun gif particular para que indique la precarga de la foto?

otra cosa, puedo saber el porcentaje de la precarga para hacer una barrita y que cuando llegue al total la barrita, se muestre toda la foto? osea que el 100% es la barrita completa.