Buenas tardes. Llevo varios días intentando solucionar un problemilla con una lista.
Resulta que tengo un código en el que especifico una imagen central, y dos columnas laterales, cada una con opciones que se actualizan automáticamente con el paso del tiempo (son imágenes que se actualizan cada 10 minutos).
A la izquierda, en la primera lista, tengo una lista de las opciones de imágenes (radares), para elegir el que se quiera y ver las últimas imágenes. Y en la derecha, tengo la lista de horas de imágenes.
Resulta que la lista de horas de imágenes se actualiza y cambia la imagen central al pasar por encima de cada hora, pero la imagen no cambia al pasar o clickar en alguna de las opciones de la otra lista.
Os pego el código aquí. Espero que no sea mucha molestia. Todo lo que veais que no tenga relación no os preocupeis, es por otras futuras características que querría añadir, pero de momento no están implementadas, solo están los javascript.
<html>
<head>
<title>Radar Madrid AEMET</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="600">
<link rel="shortcut icon" href="v.ico">
<style type="text/css">
a, table {text-decoration: none; font-size: 7.5pt; color: Black; font-family: verdana; font-weight: bolder; line-height: 7.5pt}
img {border: none}
.td a {display:block; width:100%; height:27}
.abajo {display: none;}
</style>
</head>
<body style="background-color: transparent">
<body leftmargin="0"topmargin="0"marginwidth="0"marginheight="0"rightmargin="0">
<SCRIPT LANGUAGE="JavaScript">
//VARIABLES
var act = 1
var i=1
var t=1
var ts=1
var pulsado=0
var pulsadosat=0
var Fecha=new Date()
var tiempoact=Fecha.getTime()
var zulu=Fecha.getTimezoneOffset()
var selec=0
var fijado=1
var fijadosat=1
var cantidad=0
var porcentaje=0
var cantidadsat=0
var porcentajesat=0
//ARRAYS
anterior=new Array()
anteriorsat=new Array()
enlace=new Array()
enlacesat=new Array()
fecharadar=new Array()
fecharadarlocal=new Array()
minutrad=new Array()
horarad=new Array()
horaradlocal=new Array()
diarad=new Array()
mesrad=new Array()
añorad=new Array()
minutradesp=new Array()
fechasat=new Array()
minut=new Array()
fechasat=new Array()
minutsat=new Array()
horasat=new Array()
diasat=new Array()
messat=new Array()
añosat=new Array()
mapaid= new Array("ml","se","am","mu","cc","va","ma","pm","vd","za","ba","co","sa","ss","ca","pb")
mapasatid= new Array("sp","eu")
satid= new Array("ir","vis")
//CALCULO DE FECHAS
//RADAR
for (i=1;i<=24;i++){
tiempo=tiempoact-(10*60*1000*i)+(zulu*60*1000)
tiempolocal=tiempoact-(10*60*1000*i)
fecharadar[i]=new Date(tiempo)
fecharadarlocal[i]=new Date(tiempolocal)
minutrad[i]= fecharadar[i].getMinutes()
minutrad[i]=parseInt(minutrad[i]/10)*10 //redondea los minutos a decimas
if (minutrad[i]==0){
minutrad[i]='00'
}
horarad[i]=fecharadar[i].getHours()
if (horarad[i]<10){
horarad[i]='0'+horarad[i]
}
horaradlocal[i]=fecharadarlocal[i].getHours()
diarad[i]=fecharadar[i].getDate()
if (diarad[i]<10){
diarad[i]='0'+diarad[i]
}
mesrad[i]=fecharadar[i].getMonth()+1
if (mesrad[i]<10){
mesrad[i]='0'+mesrad[i]
}
añorad[i]=fecharadar[i].getFullYear()
}
//CARGA DE IMAGENES INICIAL
//RADAR
for (i=1;i<=24;i++){
anterior[i]=new Image(480,530);
enlace[i]='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/' + añorad[i] + mesrad[i] + diarad[i] + horarad[i] + minutrad[i] + '_r8co.gif';
anterior[i].src = enlace[i];
}
nodisp=new Image(480,530);
enlacenodisp='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8pb_nodisp.gif'
nodisp.src=enlacenodisp
//COMIENZAN LAS FUNCIONES
//FUNCIONES PROGRESO DE CARGA
function progreso(){
cantidad=0
porcentaje=0
for (i=1;i<=24;i++){
if (anterior[i].complete){
cantidad=cantidad+1
document.getElementById("2celda"+i).style.background="blue";
}
}
if (nodisp.complete){
cantidad=cantidad+1
}
porcentaje=Math.ceil(cantidad*100/25);
document.getElementById("cuenta").value= 'Cargando imagenes del radar: ' + porcentaje + ' %'
if (porcentaje==100) findecarga();
else setTimeout("progreso()", 300);
}
function findecarga(){
document.getElementById("cuenta").value='Fin de carga de imagenes del radar'
}
//FUNCIONES NO IMAGEN
function noimagen(){
var s=document.form3.radares.value
document.getElementById("radarimg").src='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8' + mapaid[s] + '_nodisp.gif'
}
//FUNCIONES SELECCIONAR PROVINCIA RADAR Y TIPO DE SATELITE
function radar(selec)
{
for (i=1;i<=24;i++){
document.getElementById("2celda"+i).style.background="white";
if(minutrad[i]==00){minutradesp[i]='00'}
if(minutrad[i]==10){minutradesp[i]='00'}
if(minutrad[i]==20){minutradesp[i]='00'}
if(minutrad[i]==30){minutradesp[i]='30'}
if(minutrad[i]==40){minutradesp[i]='30'}
if(minutrad[i]==50){minutradesp[i]='30'}
if (selec=="15"){minut[i]=minutradesp[i]}
else {minut[i]=minutrad[i]}
enlace[i]='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/' + añorad[i] + mesrad[i] + diarad[i] + horarad[i] + minut[i] + '_r8' + mapaid[selec] + '.gif';
anterior[i].src = enlace[i];
}
enlacenodisp='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8' + mapaid[selec] + '_nodisp.gif'
nodisp.src=enlacenodisp
progreso()
cambia2(act)
}
//FUNCIONES DE CAMBIO DE HORA
function cambia()
{
sel=document.form1.nombre1.value;
colorfondo(sel)
cambia2(sel)
}
function cambia2(sel)
{
var h=document.form3.radares.value
document.getElementById("radarimg").width=480;document.getElementById("radarimg").height=530
if (h==15){document.getElementById("radarimg").width=500;document.getElementById("radarimg").height=500}
document.getElementById("radarimg").src=anterior[sel].src;
act=sel
document.form1.nombre1.value=sel
cuadro(act)
}
//FUNCIONES PRESENTACION HORA EN UN CUADRO DE TEXTO Y ESCRIBIR LAS HORAS EN PANTALLA (C.SELECCION Y DESLIZADOR)
function cuadro(n)
{
var horalocal = horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
if (document.form3.radares.value=="15"){minut[n]=minutradesp[n]}
else {minut[n]=minutrad[n]}
document.getElementById("hora").value= 'Radar: ' + horalocal + ':' + minut[n]
}
function escribe(n)
{
var horalocal=horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
document.write(horalocal + ':' + minutrad[n])
}
//FUNCIONES CAMBIO DE COLOR DE FONDO EN DESLIZADOR
function colorfondo(numcelda)
{
for (i=1;i<=24;i++){
document.getElementById("celda"+i).style.background="white";
}
document.getElementById("celda"+numcelda).style.background="cyan"
}
//FUNCIONES DE ANIMACION
var frames=25
function animar(n)
{
var vel=300
n=n-1
t=setTimeout("animacion("+ n +")",vel)
}
function animacion(x)
{
if(x>0){cambia2(x);animar(x);cuadro(x);colorfondo(x)}
if(x==0){cambia2(1);cuadro(x+1);x=frames;t=setTimeout("animar("+x+")",1500)}
}
//FUNCIONES DEL DESLIZADOR
function deslizador(x){
if (fijado==1){
colorfondo(x)
cambia2(x)
}
}
function deslizadoron(){
if(fijado==0){
document.getElementById("celdaon").style.background="red"
document.getElementById("celdaoff").style.background="white"
fijado=1
}
}
function deslizadoroff(){
if(fijado==1){
document.getElementById("celdaon").style.background="white"
document.getElementById("celdaoff").style.background="red"
fijado=0
}
}
</SCRIPT><SCRIPT LANGUAGE="JavaScript">
//VARIABLES
var act = 1
var i=1
var t=1
var ts=1
var pulsado=0
var pulsadosat=0
var Fecha=new Date()
var tiempoact=Fecha.getTime()
var zulu=Fecha.getTimezoneOffset()
var selec=0
var fijado=1
var fijadosat=1
var cantidad=0
var porcentaje=0
var cantidadsat=0
var porcentajesat=0
//ARRAYS
anterior=new Array()
anteriorsat=new Array()
enlace=new Array()
enlacesat=new Array()
fecharadar=new Array()
fecharadarlocal=new Array()
minutrad=new Array()
horarad=new Array()
horaradlocal=new Array()
diarad=new Array()
mesrad=new Array()
añorad=new Array()
minutradesp=new Array()
fechasat=new Array()
minut=new Array()
fechasat=new Array()
minutsat=new Array()
horasat=new Array()
diasat=new Array()
messat=new Array()
añosat=new Array()
mapaid= new Array("ml","se","am","mu","cc","va","ma","pm","vd","za","ba","co","sa","ss","ca","pb")
mapasatid= new Array("sp","eu")
satid= new Array("ir","vis")
//CALCULO DE FECHAS
//RADAR
for (i=1;i<=24;i++){
tiempo=tiempoact-(10*60*1000*i)+(zulu*60*1000)
tiempolocal=tiempoact-(10*60*1000*i)
fecharadar[i]=new Date(tiempo)
fecharadarlocal[i]=new Date(tiempolocal)
minutrad[i]= fecharadar[i].getMinutes()
minutrad[i]=parseInt(minutrad[i]/10)*10 //redondea los minutos a decimas
if (minutrad[i]==0){
minutrad[i]='00'
}
horarad[i]=fecharadar[i].getHours()
if (horarad[i]<10){
horarad[i]='0'+horarad[i]
}
horaradlocal[i]=fecharadarlocal[i].getHours()
diarad[i]=fecharadar[i].getDate()
if (diarad[i]<10){
diarad[i]='0'+diarad[i]
}
mesrad[i]=fecharadar[i].getMonth()+1
if (mesrad[i]<10){
mesrad[i]='0'+mesrad[i]
}
añorad[i]=fecharadar[i].getFullYear()
}
//CARGA DE IMAGENES INICIAL
//RADAR
for (i=1;i<=24;i++){
anterior[i]=new Image(600,600);
enlace[i]='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/' + añorad[i] + mesrad[i] + diarad[i] + horarad[i] + minutrad[i] + '_r8ma.gif';
anterior[i].src = enlace[i];
}
//COMIENZAN LAS FUNCIONES
//FUNCIONES PROGRESO DE CARGA
function progreso(){
cantidad=0
porcentaje=0
for (i=1;i<=24;i++){
if (anterior[i].complete){
cantidad=cantidad+1
document.getElementById("2celda"+i).style.background="blue";
}
}
if (nodisp.complete){
cantidad=cantidad+1
}
porcentaje=Math.ceil(cantidad*100/25);
document.getElementById("cuenta").value= 'Cargando imagenes del radar: ' + porcentaje + ' %'
if (porcentaje==100) findecarga();
else setTimeout("progreso()", 300);
}
function findecarga(){
document.getElementById("cuenta").value='Fin de carga de imagenes del radar'
}
//FUNCIONES NO IMAGEN
function noimagen(){
var s=document.form3.radares.value
document.getElementById("radarimg").src='http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/r8' + mapaid[s] + '_nodisp.gif'
}
//FUNCIONES DE CAMBIO DE HORA
function cambia()
{
sel=document.form1.nombre1.value;
colorfondo(sel)
cambia2(sel)
}
function cambia2(sel)
{
var h=document.form1.radares.value
document.getElementById("radarimg").width=480;document.getElementById("radarimg").height=530
if (h==15){document.getElementById("radarimg").width=500;document.getElementById("radarimg").height=500}
document.getElementById("radarimg").src=anterior[sel].src;
act=sel
document.form1.nombre1.value=sel
cuadro(act)
}
//FUNCIONES PRESENTACION HORA EN UN CUADRO DE TEXTO Y ESCRIBIR LAS HORAS EN PANTALLA (C.SELECCION Y DESLIZADOR)
function cuadro(n)
{
var horalocal = horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
if (document.form3.radares.value=="15"){minut[n]=minutradesp[n]}
else {minut[n]=minutrad[n]}
document.getElementById("hora").value= 'Radar: ' + horalocal + ':' + minut[n]
}
function cuadrosat(n)
{
var horalocal = horasat[n]
document.getElementById("horasat").value= 'Satelite: ' + horalocal + ':' + minutsat[n]
}
function escribe(n)
{
var horalocal=horaradlocal[n]
if(horalocal<10){
horalocal='0'+horalocal
}
if(horalocal==0){
horalocal='00'
}
document.write(horalocal + ':' + minutrad[n])
}
function escribesat(n)
{
var horalocal = horasat[n]
document.write(horalocal + ':' + minutsat[n])
}
//FUNCIONES CAMBIO DE COLOR DE FONDO EN DESLIZADOR
function colorfondo(numcelda)
{
for (i=1;i<=24;i++){
document.getElementById("celda"+i).style.background="white";
}
document.getElementById("celda"+numcelda).style.background="cyan"
}
//FUNCIONES DE ANIMACION
var frames=25
function animar(n)
{
var vel=300
n=n-1
t=setTimeout("animacion("+ n +")",vel)
}
function animacion(x)
{
if(x>0){cambia2(x);animar(x);cuadro(x);colorfondo(x)}
if(x==0){cambia2(1);cuadro(x+1);x=frames;t=setTimeout("animar("+x+")",1500)}
}
//FUNCIONES DEL DESLIZADOR
function deslizador(x){
if (fijado==1){
colorfondo(x)
cambia2(x)
}
}
</SCRIPT>
</head>
<div align=center>
<td colspan="2" align='center' valign='top' ><table cellpadding="0" cellspacing="0" border ="0" align="center" width="789">
<tr height="535">
<td align="right" width="125" height="535">
<form name="form1">
<select name="radares" size="16 " onclick="radar(this.value)">
<option value=11 selected>A Coruña</option>
<option value=2>Almeria</option>
<option value=12>Asturias</option>
<option value=7>Baleares</option>
<option value=10>Barcelona</option>
<option value=4>Caceres</option>
<option value=14>Canarias</option>
<option value=6>Madrid</option>
<option value=0>Malaga</option>
<option value=3>Murcia</option>
<option value=8>Palencia</option>
<option value=1>Sevilla</option>
<option value=5>Valencia</option>
<option value=13>Vizcaya</option>
<option value=9>Zaragoza</option>
<option value=15 >Peninsula y Baleares</option>
</select>
</form></td>
<td align="center" height="535" width="542"> <img id="radarimg" name="primera" border=0 src="" width="480" height="530" onError="noimagen()"> </td>
<td width="100"height="600"bgcolor="#C0C0C0"align=center>
<table id="selector" width="100"height="600">
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda24"onmouseover="deslizador(24);"><script>escribe(24)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda23"onmouseover="deslizador(23);"><script>escribe(23)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda22"onmouseover="deslizador(22);"><script>escribe(22)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda21"onmouseover="deslizador(21);"><script>escribe(21)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda20"onmouseover="deslizador(20);"><script>escribe(20)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda19"onmouseover="deslizador(19);"><script>escribe(19)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda18"onmouseover="deslizador(18);"><script>escribe(18)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda17"onmouseover="deslizador(17);"><script>escribe(17)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda16"onmouseover="deslizador(16);"><script>escribe(16)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda15"onmouseover="deslizador(15);"><script>escribe(15)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda14"onmouseover="deslizador(14);"><script>escribe(14)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda13"onmouseover="deslizador(13);"><script>escribe(13)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda12"onmouseover="deslizador(12);"><script>escribe(12)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda11"onmouseover="deslizador(11);"><script>escribe(11)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda10"onmouseover="deslizador(10);"><script>escribe(10)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda9"onmouseover="deslizador(9);"><script>escribe(9)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda8"onmouseover="deslizador(8);"><script>escribe(8)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda7"onmouseover="deslizador(7);"><script>escribe(7)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda6"onmouseover="deslizador(6);"><script>escribe(6)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda5"onmouseover="deslizador(5);"><script>escribe(5)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda4"onmouseover="deslizador(4);"><script>escribe(4)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda3"onmouseover="deslizador(3);"><script>escribe(3)</script></td>
</tr>
<tr>
<td bgcolor="#DDDDDD"align="center"id="celda2"onmouseover="deslizador(2);"><script>escribe(2)</script></td>
</tr>
<tr>
<td align="center"id="celda1"bgcolor="Yellow" onmouseover="deslizador(1);"><script>escribe(1)</script></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="abajo">
<input type="text" id="cuenta">
<input type="text" id="hora">
<p align="center"><input type="text" id="cuentasat"></p>
<input type="text" id="horasat">
<form name="form3">
<select name="radares"onchange="radar(this.value)">
<option value=0 selected></option>
</select>
</form>
<script language=javascript>
cuadro(1)
cuadrosat(1)
cambia2(1)
cambia2sat(1)
progreso()
progresosat()
</script>
</div>
</body>
</html>
Saludos y muchas gracias!!
