Rollover de capas con CSS

aRojilla · #1 (**permalink**) 14/12/2004, 19:22

Hola,

¿Se puede hacer este rollover con CSS?

http://terra.es/personal7/zacatua/test/index.html

Lo he intentado de mil maneras y lo más que me he acercado ha sido este código:

Código HTML:

<!-- En la cabecera: -->

<style>

.miniatura {
margin:10px;
border-left:2px solid #5f5f5f;
border-top:2px solid #5f5f5f;
border-right:2px solid #dddddd; 
border-bottom:2px solid #dddddd;
}

div#debajo {
position:absolute;
visibility:visible;
z-index:98;
width:126px;
height:126px;
border:1px solid #5f5f5f;
background-color: #ff0000;
background-image:  url(fondo.gif);
background-repeat: no-repeat;
}

div#encima a:link, div#encima a:visited {
position:absolute;
visibility:visible;
z-index:99;
width:126px;
height:126px;
border:1px solid #5f5f5f;
background-color: #ff0000;
background-image:  url(fondo.gif);
background-repeat: no-repeat;
}

div#encima a:hover, div#encima a:active {
visibility:hidden;
}

</style>

<!-- En el cuerpo: -->

<table border="0" cellpadding="10" cellspacing="0"><tr><td>

<div id="debajo">
<a href="#" title="No link">
<img src="nikon-logo.gif" class="miniatura">
</a>
</div>

<div id="encima">
<a href="#" title="No link">
<img src="foto-h2.gif" class="miniatura">
</a>
</div>

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

A ver si alguien me puede echar una mano, se lo agradecería mucho!

orochies · #2 (**permalink**) 14/12/2004, 20:36

Tan facil como esto y con un poquito de javascript aunque en realidad la web no muestra un rollover de capas sino de imagenes con stylos diferentes a cada una...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 	"http://www.w3.org/TR/html4/strict.dtd">
 
 <html>
 <head>
 	<title>RollOver</title>
 	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 	<style type="text/css">
	img.imagen {
 	border: 1px solid #5f5f5f;
 	} 
 	img.rollimage {
 	margin:10px; 
 	border-left: 2px solid #5f5f5f; 
 	border-top:2px solid #5f5f5f; 
 	border-right: 2px solid #dddddd; 
 	border-bottom:2px solid #dddddd;	
 	}
	</style>
 </head>
 
 <body>
 <table width="126" height="126" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td class="imagen" bgcolor="#ffffff" align="right" valign="top">
 <div><a href="#" title="No link / No hay enlace">
 <img class="rollimage" src="foto-h2.gif" onmouseover="this.src='nikon-logo.gif'" onmouseout="this.src='foto-h2.gif'" >
 </a>
 </div>
 </td>
 </tr>
 </table>
 </body>
 </html>

Trata de entender el codigo... jejejeje lo saque de la misma web que muestras

...

_Saludos...

aRojilla · #3 (**permalink**) 14/12/2004, 21:38

Hola orochies, muchísimas gracias por tu respuesta!

Ya sé que la web no muestra capas, y conozco el código... porque es mía!

Es que el código del rollover debo insertarlo en un php y por una causa que desconozco no puedo usar comillas simples ('), por eso quiero saber si ese rollover se puede hacer sólo con layers y css... he visto algunos así, pero yo no consigo hacerlo y es el último recurso que me queda... llevohoras probando y buscando por la red pero nada...

necesito conseguir un rollover como ese, pero sin usar comillas, no sé si será posible... con el código que puse antes casi lo logro, pero no funciona del todo...

gracias y un abrazo!

FuLaNo_ · #4 (**permalink**) 15/12/2004, 01:25

aRojilla, pues inserta todo el codigo en una funcion de PHP y luego llama la funcion en lugar de hacer un echo '';, alli no tendrás problemas con las comillas (creo), o bien, el echo hasto con comillas dobles (") y todo el codigo html y javascript con comillas simples ', o a las comillas dobles de html pone un \ delante, ej:

<td class=\"imagen\" bgcolor=\"#ffffff\" align=\"right\" valign=\"top\">

Eso hará que PHP interprete las comillas como simples comillas y no como instrucciones de un comando.

Juega un poco con las comillas y lograras sacar los errores...

aRojilla · #5 (**permalink**) 15/12/2004, 08:02

Hola, muchas gracias por tu respuesta FuLaNo_, pero no se trata de eso... Es un script muy complejo, al principio eran unos 30 archivos pero ahora después de meses de trabajo y mejoras por mi parte son más de 100, y si no puedo usar comillas simples no es porque no sepa o no pueda caparlas, sino porque tengo algún conflicto con alguna variable... En fin, que es complicadísimo saber dónde está el problema y la única opción que me queda para usar ese efecto rollover es no usar comillas, por eso pregunto si se puede conseguir el efecto sólo con capas y CSS.

Agradezco mucho tu respuesta, de verdad, pero esto no tiene nada que ver con PHP. Sólo necesito que alguien me ayude a consegir el rollover o que me diga dónde me he equivocado en el código que puse al principio.

Gracias por tu interés y un abrazo!

orochies · #6 (**permalink**) 15/12/2004, 16:36

Me hubieras dicho eso antes no sabia que era tu web eh quedado como un

...

Ahora no creo que puedas hacer un rollover de capas con css, Los rollovers en css se aplican como sabras ha los hipervinculos unicamente osea ...

A :hover {
color: blue;
}

Y demas, ya que es unicamente para hipervinculos no los podras usar con capas... Al menos de eso estoy casi seguro...

_Saludos...

PascalC · #7 (**permalink**) 15/12/2004, 17:11

:hover se aplica a cualquiera etiqueta html, el hecho que solo funcione sobre enlaces en internet explorer es un bug de dicho navegador y no una limitacion de css.

aRojilla · #8 (**permalink**) 15/12/2004, 17:12

Cita:

Iniciado por orochies

Me hubieras dicho eso antes no sabia que era tu web eh quedado como un

...

lo siento! jajaja! no se me había ocurrido decirlo!

bueno, lo que quiero conseguir es poner dos capas (div o span), una sobre la otra, y que una sea visible y la otra esté oculta y cuando pase el cursor cambiar su estado... algo así como #capadearriba a:hover {visibility:hidden... Casi me sale, pero todavía sigo probando...

muchas gracias y un saludazo!!!

aRojilla · #9 (**permalink**) 17/12/2004, 04:36

¿Nadie?

PascalC · #10 (**permalink**) 17/12/2004, 07:49

http://ombreternel.org/

pasa el raton en las images de izquierda, es un rollover CSS, analiza el CSS para comprender la idea (no es el unico método).

aRojilla · #11 (**permalink**) 17/12/2004, 15:02

Cita:

Iniciado por PascalC

http://ombreternel.org/

pasa el raton en las images de izquierda, es un rollover CSS, analiza el CSS para comprender la idea (no es el unico método).

Por lo que veo sólo juegan con el fondo:

Código HTML:

#itemr1 {background-image:url('IMG/rubon1.gif');}
#itemr1:hover { background-image:url('IMG/ruboff1.gif'); }

Yo lo que quiero es mejorar el código que puse en mi primer mensaje para aprender el funcionamiento de las capas y sus estados (visible y hidden) para hacer un rollover que oculte una capa y muestre otra.

Pero muchas gracias por tu respuesta, ese sitio es muy interesante porque está lleno de archivos CSS. Y también agradezco mucho tu tiempo...

¡Un saludo!