Foros del Web » Programando para Internet » Javascript »

createElement + img + appendChild + IE

Estas en el tema de createElement + img + appendChild + IE en el foro de Javascript en Foros del Web. Buenas noches a tod@s compañer@s. Os traigo una de mis preguntas raras Os pongo en situación: Es tan simple como que quiero que al darle ...
  #1 (permalink)  
Antiguo 24/09/2006, 13:35
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
createElement + img + appendChild + IE

Buenas noches a tod@s compañer@s.

Os traigo una de mis preguntas raras

Os pongo en situación:

Es tan simple como que quiero que al darle a un botón (enlace) se cargue una imagen en una capa.

PArece una tontería no? pues hay os dejo el código, y después os digo el problema

Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<
html>
<
head>
    <
title>Previsualizar Imagen</title>
    <
script language="JavaScript1.2" type="text/javascript">
        function 
agregarImagen ()
        {
            var 
objDiv document.getElementById("capaPrueba");
            
            var 
newImage document.createElement("img");
            
            
newImage.src "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif";
            
            
objDiv.appendChild(newImage);
        }
    
</script>
</head>

<body>
<div id="capaPrueba" style="width:300px;height:300px;border:1px solid red;background-color:#000000"></div><br>
<br>
<br>
<br>
<br>
<a href="javascript:void(null)" onclick="agregarImagen()">Pulsar para incluir Imagen</a>


</body>
</html> 
En Firefox, Netscape, Opera.... funciona perfectamente, pero en IE, NO CARGA LA IMAGEN.

Me he fijado, que si arrastas el ratón (haciendo selección) hay un Objeto (hay area reservada para la imagen en el navegador) pero no se me visualiza...

He de aclarar: debe de ser por medio de DHTML, dado que para lo que lo estoy orientando, no puede haber nada de HTML, debe de crearse todo desde CERO.

He hecho uso de la imagen del Foro, por no tener que subir ninguna a servidor (si no se debe de hacer ese tipo de cosas, porfavor, decírmelo, y de antemano, me disculpo).

Espero que podais ayudarme, y decirme en qué estoy fallando, dado que hace ya 2 horas casi que le doy vueltas, y no llego a buen puerto.

Gracias a todos de antemano.

  #2 (permalink)  
Antiguo 24/09/2006, 13:43
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Corroboro: La imagen se incluye perfectamente, pero no se visualiza.

Lo que antes decía yo, de que "se reserva espacio para la imagen en el navegador", queda corroborado: He agregado dinamicamente un evento a la imagen, un onclick... y salta. Me hace la alerta que le he asignado...

Esto es de locos:
Me hace el evento, porque la imagen ESTÁ HAY.. pero no se ve la imagen (y se supone que esá.. porque me hace el evento..., porque si me hace el evento es porque está la imagen... pero la imagen no se ve... porque no está.. pero el evento...? y la imagen?.... y yo estoy???? me estoy volviendo loco?)


Porfavor, ayudarme.... algún "alienígena" que me ayude

  #3 (permalink)  
Antiguo 24/09/2006, 14:27
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 4 meses
Puntos: 13
Para definir los atributos de la nueva imagen hazlo con setAttribute():

Código:
newImage.setAttribute('src', 'aqui_la_url');
  #4 (permalink)  
Antiguo 24/09/2006, 14:32
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 18 años, 6 meses
Puntos: 4
jajaj..

a ver si asi te funciona..
Cita:
function agregarImagen ()
{
newImage = new Image();
newImage.onload = function(){
var objDiv = document.getElementById("capaPrueba");
objDiv.appendChild(newImage);
}
newImage.src = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif";

}
}
ie, esta bien menso y no te carga la imagen depues de adedirla, si le pones boton derecho y le das click en mostrar imagen lo va a hacer, por eso hago antes una precarga de imagen, a ie le tienes que llevar de la manita.

lo malo es que la w3c no tiene contemplado el onload a la imagen.
http://www.w3.org/TR/html4/struct/objects.html#h-13
=(
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 24/09/2006, 15:43
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Hola compañer@s

frijolerou: Probé con SetAtribute, y tampoco da resultado....


fer10: de la manera que propones, "llevar de la mano a IE" si funciona... y funciona tando en IE, como en Firefox, como en Opera y en Netscape.

Querría saber si hay alguna otra manera, más ESTANDAR.. o de no ser así, me quedo con tu opción y sigo con mi desarrollo.

quería daros las gracias por vuestras contestaciones.

Saludos, y a ver si hay nuevas noticias...

  #6 (permalink)  
Antiguo 24/09/2006, 17:24
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 4 meses
Puntos: 13
En el caso del primer código que pusiste en IE me funcionó quitándole la referencia al VOID:

Código:
<a href="javascript:void(null)" onclick="agregarImagen()">Pulsar para incluir Imagen</a>
Ahora si quisieras algo más estándar, utiliza setAttribute() como te mencioné y en vez de un link utiliza un botón:

Código:
<input type="button" value="Insertar imagen" onclick="agregarImagen()">
  #7 (permalink)  
Antiguo 24/09/2006, 18:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

Yo tengo algo muy parecido en una página y no tengo ningún problema con explorer, pero en vez de usar un enlace uso cualquier otro tag (en mi caso un dt...)

Me parece que no tiene ningún sentido usar un enlace para ejecutar un script (al menos no es correcto semánticamente)... y si quieres que aparezca la mano la podrías poner con estilos (Lo repito en muchos mensajes... tal vez pueda parecer un poco pesado pero casos como este me dan la razón... )

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 24/09/2006, 20:41
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 4 meses
Puntos: 13
Me equivoqué en el código que puse dinde elimine la referencia a VOID (de esta mnanera me funcionó en IE).

Código:
<a href="javascript:;" onclick="agregarImagen()">Pulsar para incluir Imagen</a>
Aunque personalmente optaria por un botón (input) en vez de un link, tal como lo señalé en mi comentario, compartiendo en alguna medida la opinión de caricatos.
  #9 (permalink)  
Antiguo 25/09/2006, 03:44
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Cita:
Iniciado por el_javi Ver Mensaje
PArece una tontería no? pues hay os dejo el código, y después os digo el problema

Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<
html>
<
head>
    <
title>Previsualizar Imagen</title>
    <
script language="JavaScript1.2" type="text/javascript">
        function 
agregarImagen ()
        {
            var 
objDiv document.getElementById("capaPrueba");
            
            var 
newImage document.createElement("img");
            
            
newImage.src "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif";
            
            
objDiv.appendChild(newImage);
        }
    
</script>
</head>

<body>
<div id="capaPrueba" style="width:300px;height:300px;border:1px solid red;background-color:#000000"></div><br>
<br>
<br>
<br>
<br>
<a href="javascript:void(null)" onclick="agregarImagen()">Pulsar para incluir Imagen</a>


</body>
</html> 
Será cosa de brujas (lo digo por mi) pero acabo de probar el código tal cual en IE6 (para windows) y la imagen se carga perfectamente
  #10 (permalink)  
Antiguo 25/09/2006, 05:12
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Buenos días a tod@s.

Me he despertado y he mirado el correo y veo que habeís respondido unos pocos

frijolerou: Yo, he hecho la prueba poniendo en el href del enlace javascript:agregarImagen() y me funciona correctamente en Internet Explorer ...

caricatos: Estimado compañero, q tal? .
Lo de usar el enlace, es meramente para lanzar el script, no por nada en especial... Realmente mi código completo, es más que eso, pero usé esta estructura para salir del paso, y enseñaros cual era mi problema...

Parece ser que el javascript:void(null) que estaba poniendo yo en el enlace, me estaba afectando a la ejecución de mi script (lanzado desde onClick)...

tunait: compañera... pues de brujas debe de ser... porque he probado el código que has posteado (que es el mismo que yo posteé en su momento) y lo he pegado en un documento nuevo.. y ni con la imagen en local, ni con la imagen tirando de Web me funciona (uso IE, Versión 6.0.2900.2180.xpsp_sp2_gdr.050301-1519)... (y en Windows)

Atendiendo a que este problema, se solventa poniendo la llamada al Script DIRECTAMENTE en el href del enlace (o en el onload de la página, para no usar el enlace, como bien dice nuestro amigo y maestro caricatos)... creo que podemos dejarlo como "Caso Cerrado".

Gracias por vuestra colaboración y vuestro tiempo

  #11 (permalink)  
Antiguo 25/09/2006, 05:32
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Cita:
Iniciado por el_javi Ver Mensaje
(uso IE, Versión 6.0.2900.2180.xpsp_sp2_gdr.050301-1519)... (y en Windows)
Hum, la mía parece ser anterior. Versión: 6.0.2800.1106

pues vamos bien

en fin, me alegra que lo solucionaras

un saludo
  #12 (permalink)  
Antiguo 25/09/2006, 08:52
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

Cita:
Iniciado por el_javi Ver Mensaje
...Atendiendo a que este problema, se solventa poniendo la llamada al Script DIRECTAMENTE en el href del enlace (o en el onload de la página, para no usar el enlace, como bien dice nuestro amigo y maestro caricatos)... creo que podemos dejarlo como "Caso Cerrado".
...
Pues no es eso lo que digo... Digo que el href es un atributo donde debería ir una dirección y no un script... para eso están los botones como dice frijolerou, y con estilos podrías simular la apariencia, o usando cualquier tag (un span por ejemplo)...

... y el onload del body... ¿?

...pero si das por resuelto el tema, a mi me parece bien...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 13/11/2008, 08:43
 
Fecha de Ingreso: agosto-2007
Ubicación: Torremolinos Málaga
Mensajes: 9
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: createElement + img + appendChild + IE

MIL GRACIAS!!!!!!!!!!!!!!!!!!!
RESUMIENDO:
Tenía exactamente el mismo problema que Javi!!
Es decir pasar una imagen a un <td> por InnerHTML. Me funcionaba perfecto, salvo en IE6 (como te odio H... de P...). El caso es que lo ponía todo bien, pero la imagen no se mostraba (pero si me ponía sobre ella, botón derecho y "mostrar imagen" salía!.... es decir el código estaba perfecto).

La solución era FÁCIL e INSOSPECHADA!!!!! Efectivamente yo tenía:
<a href="javascript:void(0)" onclick="funcion_que_me_pone_la_imagen(src)">AÑADI R</a>

Y lo he sustituido por:


<a href="javascript:funcion_que_me_pone_la_imagen(src );" >AÑADIR</a>

Y FUNCIONÓ!!!!

(lo más curioso es que el problema tenía un comportamiento aleatorio: de vez en cuando salía, de vez en cuando no... VAYA para volverse LOCO!!!!!!!!!!!

jejejee MIL GRACIAS otra vez
  #14 (permalink)  
Antiguo 13/11/2008, 08:46
 
Fecha de Ingreso: agosto-2007
Ubicación: Torremolinos Málaga
Mensajes: 9
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: createElement + img + appendChild + IE

jejje me acabo de dar cuenta de la fecha de los mensajes...
un añito despué el IE6 sigue dando por Q-LO!!!!! Y cualquiera le dice a un cliente que se instale el firefox o el IE7!!!!

Si algo bueno va a tener el vista es que viene con IE7 jijijijijijijij
  #15 (permalink)  
Antiguo 13/11/2008, 09:22
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: createElement + img + appendChild + IE

Hola nahtml

Madre mía.. no entendía el mensaje de confirmación que me ha llegado porque habías escrito en el foro al respecto..

Como bien dices, hace 1 año que solicité ayuda sobre esto, y mira, te ha sido de ayuda (de lo cual me alegro muchísimo).

Para lo que necesites, ya sabes donde estamos.

Javier
  #16 (permalink)  
Antiguo 13/11/2008, 16:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: createElement + img + appendChild + IE

Hola:

En realidad, los años que han pasado son 2 (dos)... bueno, para las mates no soy muy bueno, pero ese cálculo es fácil.

Cerramos el tema.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 21:09.