Insertar un <img> en un <div>

[Bam_Margera]

Hola!

Tengo que hacer una galeria en JavaScript para clase, y bueno, no me funcionaba como lo tengo en mis apuntes, asi que he intentado simpemente hacer lo que digo en el titulo de la siguiente manera

Código:

<script type="text/javascript"> 

			var imagen = 'img0.png';
			var elemento = document.createElement("img");
			elemento.setAttribute(src,imagen);
			var actual = document.getElementById('imagen_actual');
			actual.appendChild(elemento);
			
			
</script>

y el html

Código:

<div id="gallery">
	
    <div id="slides">
    
    <div class="slide" ><img id="imagen_actual" src=""/></div>
   
      
    </div>
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a onclick=""><img src="img/sample_slides/miniatura_img0.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides//miniatura_img3.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/miniatura_img2.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides//miniatura_img4.png" alt="thumbnail" /></a></li>
    </ul>
    
    
    </div>
    
  </div>

Pero no me hace nada.. que hago mal?

un saludo y gracias!

[Bam_Margera]

Código:

<script type="text/javascript"> 
			
			var actual = document.getElementById('imagen_actual');
					
			actual.src = "img/sample_slides/img0.png";

			
			
</script>

Esto tampoco me funciona...

por cierto el HTML

Código:

<div id="gallery">
	
    <div id="slides">
    
    <div class="slide" ><img id="imagen_actual" src=""/></div>
   
      
    </div>
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a onclick=""><img src="img/sample_slides/miniatura_img0.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides//miniatura_img3.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/miniatura_img2.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides//miniatura_img4.png" alt="thumbnail" /></a></li>
    </ul>
    
    
    </div>
    
  </div>

[zerokilled]

en el codigo del primer post, el problema la linea elemento.setAttribute(src,imagen);. el primer parametro de setAttribute siempre debe evaluar a un stirng. en tu caso se considera una variable y si no la tienes definida te genera error.

el codigo del segundo post tecnicamene debe funcionar. ahora bien, aplicado a ambos casos, debes tener en cuenta que primero debe cargarse la parte HTML correspondiente para que el script pueda operar sobre los elementos. o sea, si tu script se interpreta de inmediato, debes de ubicarlo luego del codigo HTML que funciona como la galeria. no se si este sea tu problema pero sospecho que por ahi va.

[Bam_Margera]

De acuerdo, he puesto el script al final,

Vale

ahora me gustaria que al hacer clic en uno de los <li> de abajo, le he dado una id menuitem1

con este codigo

Código:

<script type="text/javascript"> 

			var rutas = ["img/sample_slides/img0.jpg","img/sample_slides/img3.jpg","img/sample_slides/img4.jpg","img/sample_slides/img5.jpg"];
			
			
			var actual = document.getElementById('imagen_actual');
			function carga_imagen(indice){		
				actual.src = rutas[indice];
			}
			
			function actualizar(){
				
			}
			carga_imagen(0);
			
</script>

Como puedo hacerlo? la idea es a cada li asignarle un id menuItem++ y luego asi navegar por el array

como puedo relacionar el click li con la funcion carga_imagen ?

[Bam_Margera]

Bueno, que tonto, lo he hecho agregando la propiedad onClic al <li> ... pero me gustaria saber si puedo programarlo como decia antes..

[jor_0203]

Elementos Inline
a br span bdo object
applet img map iframe tt
i b big small u
s strike font basefont em
strong dfn code q sub
sup samp kbd var cite
abbr acronym input select textarea
label button

Elementos Block
p h1-h6 div ul ol
dl menu dir pre hr
blockquote address center noframes isindex
fieldset table form