Problemilla en la colocación de unas imagenes en un div

paxarin · #1 (**permalink**) 20/12/2011, 12:12

Muy buenas.
Nuevamente aqui estoy un poco liado con una script.
haber este script es para cambiar fotos/imagenes dentro de un div de la web, pero cuando refresco la pagina en lugar de aparecer dentro del div aparece en el header y no soy capaz usando document.getElementById("dest"); de hacer que se posicione y ya no se que es lo que estoy haciendo mal.
haber si alguien me puede hechar un cable.
Aqui os dejo el codigo.

<script>

</script>
**= intento de que las imagenes cambiaran en el div "dest".
En el html la etiqueta body hace que una vez cargada la web comienze el movimiento de las imagenes.
<body onLoad="graficosAnimados();">
Probe a poner el onload en el div como cuando se llama a una función de validación cuando se quiere validar el formulario, pero tampoco.
La verdad que llevo toda la tarde dandole vueltas y no se me ocurre que probar.
Alguien puede echarme un ojo al codigo?

zerokilled · #2 (**permalink**) 20/12/2011, 12:36

buenas,
fíjate en la siguiente línea, document.images[0].src=imagenes[imgNum].src;. estas indicando actualizar la primera imagen del documento. el objeto images es una colección de imágenes donde cada elemento representa una imagen según el orden en que aparece en el documento. por eso el cambio ocurre en el header, porque estas indicando images[0]. deberias darle un id a la imagen y en lugar de usar document.images utilizas getElementById.

paxarin · #3 (**permalink**) 20/12/2011, 13:14

Cita:

Iniciado por zerokilled

buenas,
fíjate en la siguiente línea, document.images[0].src=imagenes[imgNum].src;. estas indicando actualizar la primera imagen del documento. el objeto images es una colección de imágenes donde cada elemento representa una imagen según el orden en que aparece en el documento. por eso el cambio ocurre en el header, porque estas indicando images[0]. deberias darle un id a la imagen y en lugar de usar document.images utilizas getElementById.

Se que me llamaras inutil y otras cosas más....lo acepto.
Pero no funciona, ya no se posiciona en el header pero lo unico que hace es ponerme las dos imagenes que contiene el div.

<script>

</script>
el div es este.
<div id="dest">
<img src="foto/imagen0.jpg" id="pri">
<img src="foto/imagen1.jpg">
</div>

Probe como veras a ponerle un id a la imagen pero tampoco carga.
la verdad no me explico que es lo que sucede.
Pero de todas formas muchas gracias por tu ayuda

zerokilled · #4 (**permalink**) 20/12/2011, 13:57

entonces, no había comprendido bien lo que tenías, particularmente en el html. ¿ambas imagenes dentro del DIV tienen que cambiar? ¿o solo la que tiene la ID pri? en el script, en lugar de tomar el elemento por el id "dest", debería ser "pri". pero eso solamente te cambiaría dicha imagen. si debes cambiar ambas, entonces debes agregar más código a la función. una línea adicional para tomar la referencia de la imagen y hacer lo mismo como hasta ahora haz hecho. adicionalmente, el contador tienes que sumarle uno para que pueda recorrer las posiciones correctas del array imagenes.

paxarin · #5 (**permalink**) 20/12/2011, 14:10

haber si yo cojo es script y lo pongo en un html solo osea un div solo dentro del body, tal y como estaba al principio funciona correctamente y va cambiando las imagenes correctamente.
Pero al pasarlo al html de la web ya la cosa no va, vamos no cambia dentro del div.
Debe de cambiar las dos imagenes tanto la que puse como "pri" como la siguiente que no tiene ningun id, por este motivo fue por que puse el nombre del div que contiene las imagenes y al que debe de afectar el css.
Mira el codigo completo de la pagina es este.

<!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>
<link rel="stylesheet" type="text/css" href="pub.css" />

<link type="text/css" rel="stylesheet" href="galer/skins/tn3/tn3.css"></link>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#wrapper").fadeOut(0,function(){ $(this).fadeIn(20000); });

});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="galer/js/jquery.tn3lite.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1;
var tn1 = $('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
});
</script>
<script language="javascript">
function abrirVentana1()
{
window.open('emerg/uno.html','','titlebars=0, toolbar=0,scrollbars=0,location=0,directories=0,st atusbar=0,menubar=0,resizable=0,width=400,height=4 00,top=100,left=100');
}
function abrirVentana2()
{
window.open('emerg/dos.html','','titlebars=0, toolbar=0,scrollbars=0,location=0,directories=0,st atusbar=0,menubar=0,resizable=0,width=400,height=4 00,top=100,left=100');
}
</script>
<script>

</script>

</head>

<body onLoad="graficosAnimados();">

<div id="wrapper">
<h1>Osiris - Vinacoteca PUB - La cava</h1>
<div id="header">
<img src="img/osiris.png" width="217" height="73" id="uno" />
<img src="img/vino.png" width="215" height="73" id="dos" />
<div id="logo">
</div>
<div id="nav">
<ul class="navigation">
<li class="activa"><a href="" title="Inicio"><em class="home"></em>Inicio</a></li>
<li><a href="cava.html" title="Nuestros caldos"><em class="cava"></em>La Cava</a></li>
<li><a href="" title="Folixia"><em class="party"></em>Fiestas</a></li>
<li><a href="galer2/gale.html" title="Álbum de fotos"><em class="galer"></em>Galeria</a></li>
<li><a href="cono.html" title="Conocenos"><em class="cono"></em>Conocenos</a></li>
<li><a href="contac.html" title="Contacto"><em class="contact"></em>Contacto</a></li>
</ul>
</div>
</div>
<div id="cont1">
<div id="slider">

</div>
<div id="dest">

<img src="foto/imagen0.jpg" id="pri">
<img src="foto/imagen1.jpg">
</div>
<div id="estas">
<h3>Estás aquí:</h3>
<ul>
<li><a href="index.html">Inicio</a></li>
</ul>
</div>
</div>
<div id="cont2">
<div id="menu">
<ul>
<li><a href="inicio.html" title="Inicio"></em>Inicio</a></li>
<li><a href="cava.html" title="Nuestros caldos">La Cava</a></li>
<li><a href="" title="Folixia">Fiestas</a></li>
<li><a href="galer2/gale.html" title="Álbum de fotos"></em>Galeria</a></li>
<li><a href="cono.html" title="Conocenos"></em>Conocenos</a></li>
<li><a href="contac.html" title="Contacto">Contacto</a></li>
</ul>
</div>
<div id="cont_box">
<div class="box">
<img src="img/box_futbol.jpg" width="262" height="172" alt="Partidos de futbol" id="futbol" />
<p class="titu"> Partidos de la semana</p>
<p>Real sporting de gijón Vs. Real Mallorca</p>
<p>Sabado 24 de diciembre ( sin confirmar horario)</p>
<p class="mas"><a href="javascript:abrirVentana1()" title="">Leer más...</a></p>
</div>
<div class="box">
<img src="img/evento_navidad.jpg" width="262" height="172" alt="Partidos de futbol" id="futbol" />
<p class="titu"> Fiesta de navidad</p>
<p>Celebramos contigo la Navidad</p>
<p>Sabado 24 de diciembre a las 00:00 h</p>
<p class="mas"><a href="javascript:abrirVentana2()" title="">Leer más...</a></p>
</div>
<div class="box">
<img src="img/box_futbol.jpg" width="262" height="172" alt="Partidos de futbol" id="futbol" />
<p class="titu"> Partidos de la semana</p>
<p>Real sporting de gijón Vs. Real Madrid</p>
<p>Sabado 2 de diciembre a las 20:00 h</p>
<p class="mas"><a href="" title="">Leer más...</a></p>
</div>
<div class="box">
<img src="img/inaguración.jpg" width="262" height="172" alt="Partidos de futbol" id="futbol" />
<p class="titu"> Fiesta Inaguración</p>
<p>No te la puedes perder</p>
<p>Jueves 1 de diciembre a las 19:30 h</p>
<p class="mas"><a href="" title="">Leer más...</a></p>
</div>
</div>

<div id="red">
<div id="textred">
<p>Vinacoteca PUB OSIRIS ya esta en Facebook y Twitter, donde podrás comprobar los próximos eventos, ver fotos (¡puede que salgas en ellas!) y beneficiarte de ofertas exclusivas para nuestros seguidores en las redes sociales. ¡Únete a nosotros!</p>

</div>
<a href="http://www.facebook.com/profile.php?id=100003207368216" title="Siguenos en FaceBook"><img src="img/facebook.jpg" width="257" height="80" alt="Siguenos en FaceBook" id="face" /></a>
<a href="" title="Siguenos en Twiter"><img src="img/twitter.jpg" width="254" height="" alt="Siguenos en Twiter" id="twi" /></a>
</div>
</div>
</div>
</body>
</html>

Una cosa que no entiendo.
Por que motivo funciona cuando esta el script asi
function graficosAnimados() {
document.images[0].src=imagenes[imgNum].src;
if( imgNum<totalImagenes-1 ) {
imgNum++;
} else {
imgNum=0;
}
setTimeout( "graficosAnimados();",4000);
}
que es cuando se carga en el header y no funciona ( o no se ve) cuando lo pongo asi:
function graficosAnimados() {
document.getElementById("dest").src=imagenes[imgNum].src;
if( imgNum<totalImagenes-1 ) {
imgNum++;
} else {
imgNum=0;
}
setTimeout( "graficosAnimados();",4000);
}