Crear imagen con javascript?

LeyVargas · #1 (**permalink**) 29/04/2013, 12:36

Estoy programando una página web en asp.net y googleando encontré este código para crear una imagen, el problema es que al correr la aplicación la imagen no aparece solo aparece un como cuadrito de imagen roto pero no lo que yo pongo, el código es éste

Código HTML:

function imagendiv(div) {
               var imagen = document.createElement("img"); 
               imagen.setAttribute("src", "~/Imagenes/libro.jpg"); 
               var div = document.getElementById("capa"); 
               div.appendChild(imagen); 
           }

Alguien que me diga que está mal o como crearlo mejor? Saludos y gracias

emprear · #2 (**permalink**) 29/04/2013, 14:40

varios detalles
verificá que la ruta al archivo de imagen sea correcta.
según tu código, debés tener creado en el documento un div de id="capa", ya que es en ese elemento dónde hacés el appendChild()
si vas a definir en forma explicita el nombte del elemento al cual agregar la imagen

Código:

var div = document.getElementById("capa");

carece de sentido que tu función reciba un argumento (div)
Si ves el cuadradito que mencionás, lo más probable es que la ruta sea incorrecta.
El src ya que es una propiedad de la imagen podés definirlo también como

Código:

      imagen.src = "ruta/libro.jpg";

en lugar de utilizar setAttribute()

Saludos

LeyVargas · #3 (**permalink**) 30/04/2013, 09:03

Muchísimas gracias emprear, al parecer era el imagen.setAttribute("src", "~/Imagenes/libro.jpg"); lo que no funcionaba, lo borré y lo cambié por imagen.src = "ruta/libro.jpg"; y con eso bastó, al parecer lo primero no funciona. Gracias!

LeyVargas · #4 (**permalink**) 30/04/2013, 09:15

Me gustaria saber emprear si es posible al tiempo de crear la imagen darle un id porque quiero modificar su tamaño en esa misma funcion y cambiarla de posición, saludos

emprear · #5 (**permalink**) 30/04/2013, 11:05

Cita:

Iniciado por LeyVargas

Me gustaria saber emprear si es posible al tiempo de crear la imagen darle un id porque quiero modificar su tamaño en esa misma funcion y cambiarla de posición, saludos

Si, y no solo un id, fijate

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#img_uno{
width: 100px;
height: 100px;
}
.logo{
border: solid 3px #000;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function imagendiv() {
               var imagen = document.createElement("img"); 
               // agregamos propiedades al elemento
               imagen.src = "botones_enc.jpg"; 
               imagen.id = "img_uno";
               imagen.className = "logo";
               imagen.title = "titulo de la imagen";
               imagen.alt = "texto alternativo";
               imagen.onclick = function(){
              alert('el id de este elemento es: ' + this.id);
              };
               // definimos el elemento donde insertamos la imagen
               var div = document.getElementById("capa"); 
               // agregamos la imagen
               div.appendChild(imagen); 
           }
//]]>
</script>
</head>
<body>
<button onclick="imagendiv()">cccc</button>
<div id="capa"></div>
</body>
</html>

el tamaño lo toma del id en el css y el borde de la clase, también le agregué un evento onclick

Saludos

LeyVargas · #6 (**permalink**) 30/04/2013, 11:28

Muchisimas gracias! Perdon por las molestias, pero me gusta esto y estoy aprendiendo mucho, gracias por tu ayuda!