Optimizar más el código

Reynier · #1 (**permalink**) 11/10/2006, 08:20

Hola a todos por acá:
Bueno estoy programando un sitio web y tengo dos incógnitas. La primera es con optimizar un código Javascript. El problema es que tengo 5 imágenes. Cuando pase por encima de una aparece la información perteneciente a esa imagen y así con las demás. Nunca se puede mostrar el texto de las demás imágenes hasta que el usuario no pase el mouse por encima de ella. Actualmente eso lo tengo así:

Código PHP:

  <ul id="navegacion">
   <li class="auto"><a href="#resumen_auto" onmouseover="document.getElementById('resumen_auto').style.display='block'; document.getElementById('resumen_teorico').style.display='none'; document.getElementById('resumen_tiro').style.display='none'; document.getElementById('resumen_quirurgico').style.display='none'; document.getElementById('resumen_juego').style.display='none';"><span>Link</span></a></li>
   <li class="teorico"><a href="#resumen_teorico" onmouseover="document.getElementById('resumen_teorico').style.display='block'; document.getElementById('resumen_auto').style.display='none'; document.getElementById('resumen_tiro').style.display='none'; document.getElementById('resumen_quirurgico').style.display='none'; document.getElementById('resumen_juego').style.display='none';"><span>Link</span></a></li>
   <li class="tiro"><a href="#resumen_tiro" onmouseover="document.getElementById('resumen_tiro').style.display='block'; document.getElementById('resumen_teorico').style.display='none'; document.getElementById('resumen_auto').style.display='none'; document.getElementById('resumen_quirurgico').style.display='none'; document.getElementById('resumen_juego').style.display='none';"><span>Link</span></a></li>
   <li class="quirurgico"><a href="#resumen_quirurgico" onmouseover="document.getElementById('resumen_quirurgico').style.display='block'; document.getElementById('resumen_teorico').style.display='none'; document.getElementById('resumen_tiro').style.display='none'; document.getElementById('resumen_auto').style.display='none'; document.getElementById('resumen_juego').style.display='none';"><span>Link</span></a></li>
   <li class="juego"><a href="#resumen_juego" onmouseover="document.getElementById('resumen_juego').style.display='block'; document.getElementById('resumen_teorico').style.display='none'; document.getElementById('resumen_tiro').style.display='none'; document.getElementById('resumen_quirurgico').style.display='none'; document.getElementById('resumen_auto').style.display='none';"><span>Link</span></a></li>
   </ul>

Los imágenes aparecen haciendo uso de CSS. Fijense que todos los li tienen una clase y los enlaces un ID. ¿Como podría optimizar un poco este código? ¿Alguna ayuda?

La segunda pregunta viene cuando el usuario me desactiva el uso de Javascript en su navegador. ¿Cómo hago entonces para acceder al contenido de las imágenes?

Salu2 y esperando por sus respuestas

Davhira · #2 (**permalink**) 11/10/2006, 08:32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function a()
{
cll_resumen = new Array ("resumen_teorico", "resumen_tiro", "resumen_quirurgico", "resumen_juego");
document.all('resumen_auto').style.display='block' ;
for (i=0; i<cll_resumen.length; i++)
{
document.all(cll_resumen(i)).style.display='none'
}
}
</script>
</head>

<body>
<ul id="navegacion">
<li class="auto"><a href="#resumen_auto" onmouseover="a()">Link</a></li>
<li class="teorico"><a href="#resumen_teorico" onmouseover="a()">Link</a></li>
<li class="tiro"><a href="#resumen_tiro" onmouseover="a()">Link</a></li>
<li class="quirurgico"><a href="#resumen_quirurgico" onmouseover="a()">Link</a></li>
<li class="juego"><a href="#resumen_juego" onmouseover="a()">Link</a></li>
</ul>
</body>
</html>

Reynier · #3 (**permalink**) 11/10/2006, 08:48

Davhira gracias por responder. El código no me está funcionando. En Firefox me da este error:

Cita:

Error: document.all is not a function
Archivo Fuente: http://simpro.uci.cu/assets/simpro.js
Línea: 3

Está es la función (con sus líneas)

Código PHP:

  function CambiarElemento() {
    arr_resumen = new Array ("resumen_teorico", "resumen_tiro", "resumen_quirurgico", "resumen_juego"); 
    document.all('resumen_auto').style.display='block';
    for (i=0; i<arr_resumen.length; i++) {
        document.all(arr_resumen(i)).style.display='none'    
    }
}

Alguna idea de porque el error?
Salu2