Perfecto !!! Muchas gracias Pablo, sos grande y te lo agradezco con el alma. Eso mismo era lo que buscaba. Con JS me funciona a la perfección pero con CSS solamente me aparecen todos los DIV y no quiero que sea así pero bueno como me dices que tienes trabajo no te preocupes que ya veré como lo resuelvo a mi manera para cuando el usuario tenga JS deshabilitado.
El código está sencillo y muy bien explicado lo entendí a la perfección. Muchas gracias Salu2 -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. > -----Mensaje original----- > De: [EMAIL PROTECTED] [mailto:ovillo- > [EMAIL PROTECTED] En nombre de Pablo Ziliani > Enviado el: 12 September, 2006 11:39 PM > Para: Ovillo, la lista de CSS en castellano > Asunto: Re: [Ovillo] Un DIV sobre otro y luego oculto > > Reynier Perez Mira wrote: > > De todas formas no me queda clara la utilización correcta del término ID > y del término clase. Si tienes un enlace donde hablen al respecto te > agradecería me lo dejaras por aquí. > > > > No, disculpas pero no lo tengo ni sé si estará escrito en alguna parte > (yo lo fui descubriendo de a poco, a medida que me iba volcando hacia la > programación orientada a objetos con la que tiene más de un paralelismo). > > > Tengo este HTML: > > <div class="resumen_proyecto auto"> > > <h1>Simulador de conducción</h1> > > <img src="skins/simpro/images/proyectos/auto.jpg" alt="" /> > > <p>Contenido del parrafo</p> > > </div> > > > > Como verás no solo contiene un H1 sino que también tiene una imagen y X > párrafos (solo puse uno para ejemplificar). Cada uno de esos DIV pertenece > o debe pertenecer a imágenes ordenadas en una lista de manera tal que > cuando pase el Mouse por encima de alguna de ellas se muestre/oculte lo > necesario. Por ejemplo: > > > > 1) Imagen 1=>MouseOver=>Mostrar DIV con clase auto(ocultar todos los > demás) > > 2) Imagen 2=>MouseOver=>Mostrar DIV con clase teorico(ocultar todos los > demás) > > 3) Imagen 3=>MouseOver=>Mostrar DIV con clase quirurgico(ocultar todos > los demás) > > > > ¿Ahora me comprendes mejor lo que trato de hacer? > > Sí, y de hecho ya lo había comprendido antes. Pero por alguna razón no > podés ver como el ejemplo que te envié se aplica a tu problema. Te > explico a continuación. > > > Aún así no me queda claro esto: <body class="auto"> </body> Pues > no se cual es el objetivo final > > > Ok, lamento haber llegado hasta esta instancia. Estoy con mucho trabajo > así que prefiero ilustrar con el ejemplo y librar el aprendizaje a tu > voluntad. No esperes que te de soporte sobre esto. > Por favor, fijate este código DETENIDAMENTE. Copialo y asegurate de > probarlo con javascript deshabilitado. Para complicar las cosas usé ids > en los divs en vez de clases como veníamos hablando, sabés por qué? no > por requerimiento del css sino por que en este caso *sí* me interesa > identificar el bloque en cuestión, ya que si el javascript no está > habilitado, haciendo click en el link de navegación iremos al div > correspondiente (que es tratado como un "anchor", ancla o anclaje). > Pido disculpas al resto por el largo del pegote (y ruego porque el > Thunderbird no destruya el formato). > > <!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";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> > <title>Reynier</title> > <style type="text/css"> > .resumen_proyecto { > border: 1px solid gray; > background: #eee; > color: black; > padding: 1em; > margin-bottom: 1em; > } > /* > cuando carga la página, un javacript le agregará > al body la clase "habemus-javascript". Esto es > así para que incluso aquellos que no tengan js > habilitado (o conexiones lentas y js externos) > puedan seguir accediendo al contenido. > */ > .habemus-javascript .resumen_proyecto, > .habemus-javascript .volver {display: none} > > /* > al hacer click en un link, se disparará un js > que reemplaza la clase del body por una de estas: > auto, teorico, tiro, quirurgico, juego. > */ > > .auto #resumen-auto, > .teorico #resumen-teorico, > .tiro #resumen-tiro, > .quirurgico #resumen-quirurgico, > .juego #resumen-juego {display: block} > > /* esto es decorativo (me cago en la decoración) */ > .auto li.auto, > .teorico li.teorico, > .tiro li.tiro, > .quirurgico li.quirurgico, > .juego li.juego {font-size: 1.5em} > > </style> > <!-- Yo uso jquery porque me place --> > <script type="text/javascript" src="http://jquery.com/src/jquery- > latest.pack.js"></script> > <script type="text/javascript"> > > // al cargar el html, > // 1. agregamos al body la clase habemus-javascript > // 2. agregamos a los links la función que cambia la clase del body > > limpiarBody = function() { > return $("body").removeClass().addClass("habemus-javascript"); > } > $(document).ready(function(){ > limpiarBody(); > $('#navegacion a').bind('click', cambiarClase); > }) > > // sencillamente le agrego al body la misma clase que tiene > // el li del link cliqueado > > cambiarClase = function() { > limpiarBody().addClass(this.parentNode.className); > return false; > } > > </script> > </head> > > <body> > <ul id="navegacion"> > <li class="auto"><a href="#resumen-auto">auto</a></li> > <li class="teorico"><a href="#resumen-teorico">teórico</a></li> > <li class="tiro"><a href="#resumen-tiro">tiro</a></li> > <li class="quirurgico"><a href="#resumen- > quirurgico">quirúrgico</a></li> > <li class="juego"><a href="#resumen-juego">juego</a></li> > </ul> > <div class="resumen_proyecto" id="resumen-auto"> > <h1>Simulador de conducción auto</h1> > <img src="http://www.google.com/intl/en/logos/Logo_25wht.gif"; > alt="auto" /> > <p>Contenido del parrafo</p> > <p class="volver"><a href="#">volver</a></p> > </div> > <div class="resumen_proyecto" id="resumen-teorico"> > <h1>Simulador de conducción teórico</h1> > <img src="http://www.google.com/intl/en/logos/Logo_40wht.gif"; > alt="teórico" /> > <p>Contenido del parrafo</p> > <p class="volver"><a href="#">volver</a></p> > </div> > <div class="resumen_proyecto" id="resumen-tiro"> > <h1>Simulador de conducción tiro</h1> > <img src="http://www.google.com/intl/en/logos/Logo_50wht.gif"; > alt="tiro" /> > <p>Contenido del parrafo</p> > <p class="volver"><a href="#">volver</a></p> > </div> > <div class="resumen_proyecto" id="resumen-quirurgico"> > <h1>Simulador de conducción quirúrgico</h1> > <img src="http://www.google.com/intl/en/logos/Logo_60wht.gif"; > alt="quirurgico" /> > <p>Contenido del parrafo</p> > </div> > <div class="resumen_proyecto" id="resumen-juego"> > <h1>Simulador de conducción juego</h1> > <img src="http://www.google.com/intl/en/logos/Logo_60gry.gif"; > alt="juego" /> > <p>Contenido del parrafo</p> > <p class="volver"><a href="#">volver</a></p> > </div> > <p>Este texto sigue a continuación de todo lo anterior</p> > <p>Blah</p> > <p>Blah</p> > </body> > </html> > > > > Bueno script.aculo.us no da herramientas sino que es una librería con > efectos a lo Yahoo User Interface (YUI), Rico, Moo.fx y otras. > ...otras, tales como jquery ;-) > > > Saludos, > Pablo > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://ovillo.org/mailman/listinfo/ovillo _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
![http://www.google.com/intl/en/logos/Logo_25wht.gif"](http://www.google.com/intl/en/logos/Logo_25wht.gif"){kind=link}
![http://www.google.com/intl/en/logos/Logo_40wht.gif"](http://www.google.com/intl/en/logos/Logo_40wht.gif"){kind=link}
![http://www.google.com/intl/en/logos/Logo_50wht.gif"](http://www.google.com/intl/en/logos/Logo_50wht.gif"){kind=link}
![http://www.google.com/intl/en/logos/Logo_60wht.gif"](http://www.google.com/intl/en/logos/Logo_60wht.gif"){kind=link}
![http://www.google.com/intl/en/logos/Logo_60gry.gif"](http://www.google.com/intl/en/logos/Logo_60gry.gif"){kind=link}