Ayuda con codigo Xhtml en web

Archivado
Hola amigos/as

Quisera hacer una cosa en xhtml pero no se muy bien como, os lo explico.

En mi pagina web, tengo una sección de utilidades tal que asi http://www.vagrant.romhackhispano.org/utils.html

Pues bien, como vereis, esta dividida en catagorias mediante tablas de la siguiente estructura.


<table border="1" cellspacing="0">
<tbody>

<tr>
<td colspan="2">
<p>
<span style="color: rgb(0,0,0);"><strong>DEBUGGERS</strong></span></p>
</td>
</tr>
<td>
<tr>
Tablas en cuestion

</td>
</tr>
</tbody>
</table>




Lo que quisiera hacer es que se desplegaran si pulsas encima de una imagen, a modo de los famosos <spoilers> </spoilers> de esta web.

Es decir, que en vez de Salir en pantalla todas las utilidades de editores hexadecimales, saliese un logo a modo de imagen como esta Imagen y cuando pulses encima, se muestren las tablas con todas las utilidades de ese estilo y asi, con cada imagen de cada utilidad que vaya subiendo.Osea que a modo de la etiqueta <spoiler> pero en vez de la palabra spoiler una imagen.

Quisiera hacerlo sin tener que crear paginas para cada utilidad, es decir, todo en la misma, y que quede al final todos los logos de cada utilidad, en total 5 imagenes y, cuando pulses encima de la que desees, se abra y desplieguen las utilidades correspondientes a ella y cuando pulses otra vez encima de la imagen, se cierren.

Creo que es factible de hacer pero llevo una hora intentandolo y mis conocimientos de xhtml son buenos, pero no tanto [+risas]

Bueno amigos/as, espero podais ayudarme a conseguirlo ya que creo, es posible.

Salu2 y gracias por anticipado :D
Pues, lo más fácil que se me ocurre es que css mediante, usando ids, ocultes las partes que quieras. Después, pones esas imágenes en enlaces con onclick que llamen a una función en javascript que muestre esos ids y arreando.

Te pongo un ejemplito (sin tablas):
<!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" dir="ltr" lang="es-ES">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>test</title>

<style type="text/css">#test1, #test2, #test3{ display:none }</style>

<script type="text/javascript">
function setDisplay(obj, state){
   var o = document.getElementById(obj);
   o.style.display = state;
}
</script>

</head>

<body>

<a href="#" onclick="setDisplay('test1', 'block')">-1-</a> <a href="#" onclick="setDisplay('test2', 'block')">-2-</a> <a href="#" onclick="setDisplay('test3', 'block')">-3-</a>

<br/><br/>

<div id="test1">1 1 1 1 1 1</div>
<div id="test2">2 2 2 2 2 2</div>
<div id="test3">3 3 3 3 3 3</div>

</body>
</html>
mmm, lo que pasa es que llamar a esa funcion establecida con css no es posible, puesto que lo monte si el.

Asi que, ¿Como deberia montarlo sin el CSS? ¿Existe manera?

Gracias por la respuesta amigo.
2 respuestas
Archivado
Volver a General