Foros del Web » Creando para Internet » CSS »

Rollover de capas con CSS

Estas en el tema de Rollover de capas con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/12/2004, 19:22
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
Rollover de capas con CSS

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!

Última edición por aRojilla; 14/12/2004 a las 19:23 Razón: Me equivoqué en el código :)
  #2 (permalink)  
Antiguo 14/12/2004, 20:36
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #3 (permalink)  
Antiguo 14/12/2004, 21:38
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
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!
  #4 (permalink)  
Antiguo 15/12/2004, 01:25
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
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...
__________________
I Love Programming...
  #5 (permalink)  
Antiguo 15/12/2004, 08:02
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
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!
  #6 (permalink)  
Antiguo 15/12/2004, 16:36
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #7 (permalink)  
Antiguo 15/12/2004, 17:11
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 4 meses
Puntos: 1
: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.
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #8 (permalink)  
Antiguo 15/12/2004, 17:12
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
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!!!
  #9 (permalink)  
Antiguo 17/12/2004, 04:36
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
¿Nadie?

Última edición por aRojilla; 17/12/2004 a las 07:01
  #10 (permalink)  
Antiguo 17/12/2004, 07:49
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 4 meses
Puntos: 1
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).
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #11 (permalink)  
Antiguo 17/12/2004, 15:02
Avatar de aRojilla  
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:13.