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
