Re: [Ovillo] Un DIV sobre otro y luego oculto

Tue, 12 Sep 2006 21:39:38 -0700 

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"> &nbsp; </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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a