funcion que no actualiza el campo style a la primera pero si a la segunda

[uzor]

Buenas;

Quiero mostrar una imagen en la misma pagina al clickear sobre un link. Esta imagen debe estar superpuesta al la pagina web y quedar centrada.

Lo que he hecho ha sido crear un div:

Código HTML:

<div id="marco" style="display:none; top:50%; left:50%; position: fixed;">
</div> 

el link llama a una funcion javascript que cambia los valores style e inserta la imagen dentro del div:

Código PHP:

 onClick="showImg('<?php echo $url ?>');"  

Código Javascript:

function showImg(url){
    var text = "<img src='img/"+url+"'>"
    var img = new Image();
    img.src = 'img/db/'+url;
    
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}
 

El problema es que cuando clickeo en el enlace se muestra la imagen pero sin hacer los ajustes marginLeft y marginTop, y lo mas raro es que al volver a hacer click en el link coloca bien la imagen....

Alguna sugerencia? Gracias de antemano!

[Dradi7]

Iniciado por uzor

Buenas;

Quiero mostrar una imagen en la misma pagina al clickear sobre un link. Esta imagen debe estar superpuesta al la pagina web y quedar centrada.

Lo que he hecho ha sido crear un div:

Código HTML:

<div id="marco" style="display:none; top:50%; left:50%; position: fixed;">
</div> 

el link llama a una funcion javascript que cambia los valores style e inserta la imagen dentro del div:

Código PHP:

 onClick="showImg('<?php echo $url ?>');"  

Código Javascript:

function showImg(url){
    var text = "<img src='img/"+url+"'>"
    var img = new Image();
    img.src = 'img/db/'+url;
    
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}
 

El problema es que cuando clickeo en el enlace se muestra la imagen pero sin hacer los ajustes marginLeft y marginTop, y lo mas raro es que al volver a hacer click en el link coloca bien la imagen....

Alguna sugerencia? Gracias de antemano!

Para que te pueda tomar los valores de width o height correctamente debes hacerlo en el evento onload de la imagen asi

Código Javascript:

img.onload = function(){
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}
 

[uzor]

Iniciado por Dradi7

Para que te pueda tomar los valores de width o height correctamente debes hacerlo en el evento onload de la imagen asi

Código Javascript:

img.onload = function(){
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width/2);
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height/2);
    document.getElementById("marco").style.display="block";
}
 

Gracias por la respuesta pero sigue sin funcionar :S

[Dradi7]

Estas seguro porque yo probé el código y ya me toma los datos de width y height de la imagen y me aplica bien el margin

[uzor]

Iniciado por Dradi7

Estas seguro porque yo probé el código y ya me toma los datos de width y height de la imagen y me aplica bien el margin

Seguro, la cosa es que la imagen que muestro es la que inserto dentro del DIV mediante innerHTML, la imagen que creo dentro de la funcion javascript a partir de la URL es solo para saber sus dimensiones.

[ger84]

no debería ser

Código Javascript:

function showImg(url){
    var text = "<img src='img/"+url+"'>"
    var img = new Image();
    img.src = 'img/db/'+url;
    
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width)/2;
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height)/2;
    document.getElementById("marco").style.display="block";
}
 

[uzor]

Iniciado por ger84

no debería ser

Código Javascript:

function showImg(url){
    var text = "<img src='img/"+url+"'>"
    var img = new Image();
    img.src = 'img/db/'+url;
    
    document.getElementById("marco").innerHTML=text;
    document.getElementById("marco").style.marginLeft="-"+parseInt(img.width)/2;
    document.getElementById("marco").style.marginTop="-"+parseInt(img.height)/2;
    document.getElementById("marco").style.display="block";
}
 

que quieres decir?
Alguien que pueda ayudarme? Gracias de antemano!

[uzor]

Ya lo he resuelto... por si a alguien le interesa:

El problema era que usaba el tamaño de una imagen que aun no existia en el lado del cliente, por ello a la segunda carga si funcionaba. Lo que he hecho es pasar como parametro a la funcion javascript el tamaño de la imagen junto con su URL.

FIN