capas

vcayob · #1 (**permalink**) 23/02/2006, 18:28

Estoy trabajando con capas, como puedo hacer para que al activar una capa al pasar con el mouse (onMouseOver) al activar una capa, no oculte otra capa. La idea es que al pasar con el mouse por una opcion me aparesca una nueva capa encima de otra sin que esta se oculte.

onMouseOver="MM_showHideLayers('capa1','','hide',' capa2','','show')"

Esta funcion tiene otros parametros que me podrian servir?

Gracias por la ayuda

donpincho · #2 (**permalink**) 24/02/2006, 05:08

yo nunca he llegado a comprender del todo la funcion MM_showHideLayers; se la he visto a varias personas...
Lo que tienes que hacer es jugar con la propiedad z-index de cada <div> que es la que indica la profundidad; por así decirlo es como hacer una página con 3 coordenadas; donde el punto 0,0,0 está en la esquina superior izquierda... El eje X horizontal, El eje Y vertical y el eje Z el que sale hacia ti. El fonde de la web deberá estar en el Z=0 y la capa más profunda en Z=1 y si quieres que algo aparezca por encima en Z=2...

Para poner el atributo z-index...
<div z-index='2'>texto</div>

O con CSS
<div style="zindex: 2">texto</div>

Luego ya tienes que experimentar con MM_showHideLayers para que oculte o muestre...

Yo en este momento estoy haciendo una web que quizá te pueda dar una ayuda:
www.miquelgomis.com/mgc06

vcayob · #3 (**permalink**) 24/02/2006, 08:04

Gracias Miky por tus consejos voy a ponerlos en practica. Esta muy bien tu pagina, la he revisado y veo cosas interesantes, espero algun día poder hacer algo similar.

man0l0 · #4 (**permalink**) 24/02/2006, 12:04

Hola a todos!

Cita:

Iniciado por donpincho

yo nunca he llegado a comprender del todo la funcion MM_showHideLayers; se la he visto a varias personas...

Esa es la función JavaScript que crea DreamWeaver para cambiar las propiedades de una capa, (por eso va el MM MacroMedia

), las oculta con el display: none; y las muestra con el display: block; o similar.

En DW es muy fácil hacer este tipo de cosas, solamente hay que usar el apartado de comportamientos en el inspector de etiquetas.

Saludos!!!

Jorolo · #5 (**permalink**) 24/02/2006, 15:34

Hola a todos.

Yo lo haría así:

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
 <meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/> 
 <title>un poco de dinamismo</title>
 <style type='text/css'>
.item { list-style: none; list-style-position: inside;
					padding: 0.2ex; margin: 0.2ex; }
a { color: darkblue; text-decoration: none;}
ul { border: transparent solid 0.1ex; }
ul:hover { border: peru solid 0.1ex; }
ul:hover cite,
ul:hover em { color: maroon; }
div:hover ul { display: block; } 
div:hover a { color: blue; text-decoration: underline;}
.editorial { width: 30%;}
.oculto ul { display: none; }
.vista { visibility: hidden; }
ul:hover .vista { visibility: visible; }
 </style> </head>
<body>
<div class='oculto editorial'>
 <h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/">
			Una deliciosa forma de guardar tus favoritos </a> </h2>
 <ul class='item oculto'>
	<li> <q> <em>Del.icio.us</em> es un servicio social que permite 
		guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>
	<li>Por <cite>Christian Van Der Henst</cite> </li>
	<li class='vista'>675 lecturas y 0 comentario</li>
 </ul>
</div>
<div class='editorial'>
 <h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/">
			Una deliciosa forma de guardar tus favoritos </a> </h2>
 <ul class='item'>
	<li> <q> <em>Del.icio.us</em> es un servicio social que permite
		guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>
	<li>Por <cite>Christian Van Der Henst</cite> </li>
	<li>676 lecturas y 0 comentario</li>
 </ul>
</div> 
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p></body> </html>

Espero que os funcione.