Foros del Web » Programando para Internet » Javascript »

Imagen aleatoria JS dentro de tabla

Estas en el tema de Imagen aleatoria JS dentro de tabla en el foro de Javascript en Foros del Web. Hola muy buenas. Llevo días leyendo y probando cosas que encuentro por la red para intentar poner un script en JS que saca una imagen ...
  #1 (permalink)  
Antiguo 27/10/2009, 19:23
 
Fecha de Ingreso: octubre-2006
Mensajes: 18
Antigüedad: 17 años, 6 meses
Puntos: 0
Imagen aleatoria JS dentro de tabla

Hola muy buenas. Llevo días leyendo y probando cosas que encuentro por la red para intentar poner un script en JS que saca una imagen aleatoria(para la cabecera de mi web)y luego meter esa imagen dentro de una tabla.

El motivo de meter la imagen dentro de una tabla es porque así al cargar la web, antes aún de haber cargado la cabecera, la tabla ya crea el espacio necesario para la imagen, y así cuando finalmente carga la imagen, la web no se "agrande de repente" a causa de la carga de la imagen.

Mi problema es que lo hago como se supone que hay que hacerlo, con código HTML simple, es lo mas fácil del mundo vamos...y el problema es que en IE 8 se visualiza PERFECTO pero en firefox no hay manera(imagino que en Opera tampoco se verá bien).

En IE la imagen queda dentro de la tabla, pero en Firefox no hay manera, la imagen se queda fuera y no consigo arreglarlo...asi que sabiendo que mi código esta + o - bien porque en IE se visualiza, no quiero tocar nada mas sin consultar con los expertos :P

Aquí os dejo el cacho del código que interesa:

<table WIDTH="1000" HEIGHT="250" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<script type="text/javascript">

function VecImagenes()
{
n=0;
this[n++]="/wp-content/themes/zinrex/images/headers/header1.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header2.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header3.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header4.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header5.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header6.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header7.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header8.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header9.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header10.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header11.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header12.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header13.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header14.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header15.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header16.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header17.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header18.jpg";



this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+" />");

</script>
</td>
</tr>
</table>



PD: es una cabereca de un Theme para una web Wordpress

Saludos y espero no causarles muchas molestias :D

Última edición por drak91; 28/10/2009 a las 09:11
  #2 (permalink)  
Antiguo 28/10/2009, 04:13
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 15 años, 6 meses
Puntos: 66
Respuesta: Imagen aleatoria JS dentro de tabla

hola drak91,

lo único que veo raro es que en XHTML el atributo height no es soportado por el elemento table. Puede que sea la causa, pero no creo que vaya a ser algo tan sencillo como eso. Utiliza el atributo style para configurar tu tabla:

<table style="width:1000px;border: 0;height: 250px" cellspacing="0" cellpadding="0">

a ver si hay suerte...

salu2
  #3 (permalink)  
Antiguo 28/10/2009, 04:37
 
Fecha de Ingreso: octubre-2006
Mensajes: 18
Antigüedad: 17 años, 6 meses
Puntos: 0
Respuesta: Imagen aleatoria JS dentro de tabla

Buenas. Gracias por tu respuesta!
Ya he probado con eso que dices y, efectivamente, no hay cambio alguno...en IE se sigue viendo perfecto pero en Firefox nada de nada...

Saludos!
  #4 (permalink)  
Antiguo 28/10/2009, 08:54
 
Fecha de Ingreso: octubre-2006
Mensajes: 18
Antigüedad: 17 años, 6 meses
Puntos: 0
Respuesta: Imagen aleatoria JS dentro de tabla

Buenas de nuevo, he observado que poniendo ese código en un HTML simple, aislado, sin nada mas, el Firefox interpreta perfectamente donde tiene que poner la imagen(dentro de la tabla), pero al ponerlo en el header.php de la web es donde da el problema...

Seguiré observando a ver de qué puede ser el error, pero tiene pinta de no ser de esta parte del código, si no de alguna otra cosa del .php
  #5 (permalink)  
Antiguo 28/10/2009, 09:10
 
Fecha de Ingreso: octubre-2006
Mensajes: 18
Antigüedad: 17 años, 6 meses
Puntos: 0
Respuesta: Imagen aleatoria JS dentro de tabla

Perdón por el doble/triple posteo.
Al final he logrado que funcione poniendo el código así:


<div id="categoryheader">

<script type="text/javascript">

function VecImagenes()
{
n=0;
this[n++]="/wp-content/themes/zinrex/images/headers/header1.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header2.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header3.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header4.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header5.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header6.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header7.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header8.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header9.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header10.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header11.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header12.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header13.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header14.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header15.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header16.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header17.jpg";
this[n++]="/wp-content/themes/zinrex/images/headers/header18.jpg";



this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+" />");

</script>
</div>


En vez de usar una tabla con un solo TR y TD, he usado un DIV, al cual le he asignado la id="categoryheader" que está expresada en mi style.css de esta forma:


#categoryheader {

width: 1000px;

height: 280px;

border-top: 1px solid #636363;

border-bottom: 1px solid #040404;

}

Lo de border no hace falta en otros casos, en el mio si por temas de estética.

Espero que le sirva a alguien :) muchas gracias por todo!
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:01.