Hola amigos del foro,
he visto que en determinadas web, al pasar el mouse sobre una imagen se torna en blanco y negro, y no es un rollover ya qe carga inmediatamente
A ver si saben
Muchas gracias
22/05/2008, 23:12
| |||
| |||
 Como hacer el siguiente Efecto Hola amigos del foro, he visto que en determinadas web, al pasar el mouse sobre una imagen se torna en blanco y negro, y no es un rollover ya qe carga inmediatamente A ver si saben Muchas gracias |
|
23/05/2008, 08:55
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto ¿Tienes link a una de estas páginas? Suena muy interesante de averiguar... |
|
23/05/2008, 11:21
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto Veo y veo el código y no comprendo como lo haces  ¿Se supone que es una sola imagen o dos? Solo veo una, y la única diferencia es que uno está en top y el otro en bottom, y en verdad no veo que es lo que hace x¬x... |
|
23/05/2008, 11:35
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto  Impaciente eres, joven Jedy, ¿no se te ha ocurrido mirar la ruta a la imagen? http://www.araudi.net/forosdelweb/img/color_BN.jpg Mikel. |
|
23/05/2008, 11:56
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto O_O' Vaya que ha sido una excelente solución con un muy buen efecto. Lástima que si se quiere hacer algo similar en una página con varias imagenes, se deba hacer esto para cada una. En verdad esperaba ver un sencillo código que me lo hiciera automático  Aun así, el efecto es genial, una excelente idea, y de facil implementación. Muy bueno =P |
|
23/05/2008, 13:20
| |||
| |||
| Respuesta: Como hacer el siguiente Efecto Este tema es muy parecido al que se está tratando aquí: http://www.forosdelweb.com/f53/duda-...und-url-589207 practicamente es el mismo truco. Pero en IE no es un poco mas lento cuando se tiene el a:hover ?? o es solamente mi visión ? |
|
23/05/2008, 13:23
| |||
| |||
| Respuesta: Como hacer el siguiente Efecto Me parece que tardan igual. ya que sacaron el tema de lops navegadores aprovecho para consultar en FIREFOX me las tablas me aparecen con una sombra gris saben como quitarla? |
|
23/05/2008, 15:03
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto Lo del efecto o puedes ver en los dos enlaces que he puesto; en el primero ves el efecto y es muy fácil del el código, y en el segundo puse el enlace a la imagen que he usado. Supongo que viendo eso te bastará para entenderlo. Si algo no te queda claro pregunta y te lo explico con más detenimiento. Y en cuanto a lo de las tablas, puedes probar esto: <table border="0" style="border: solid 1px #000;"> Mikel. |
|
23/05/2008, 17:07
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto Esto es:  Se hace la imagen duplicada en color y blanco y negro, y luego se cambia la posición del fondo. Cuando hay un enlace, pongo que se vea de fondo la parte de arriba: background: url(img/color_BN.jpg) no-repeat center top; y cuando pasa el ratón (a:hover), que se ponga de fondo la parte de abajo: background: url(img/color_BN.jpg) no-repeat center bottom; Así de simple. Para mi que es un bonito truco, que se puede aplicar a cualqueir cosa, y tiene de bueno que carga una sola imagen, así no debe haber pérdida al pasar el ratón. Mikel. |
|
23/05/2008, 17:42
| |||
| |||
| Respuesta: Como hacer el siguiente Efecto No se si sere algo inexperto para esto, pero por lo que entedí, en una tabla por ejemplo, se le carga el background color, y luego al pasar el mouse que se levante el background y se vea el b/n? :S No me pasarias el codigo que utilizaste para realizar la demostracion del comentario #5, en el cual me mostrabas el efecto. Disculpa es que no lo llego a entender. Muchas gracias! |
|
23/05/2008, 17:47
| ||||
| ||||
| Respuesta: Como hacer el siguiente Efecto No, no es eso, qué más quisiera yo. La que ves ahí es la imagen completa que estoy usando, una imagen que está compuesta de dos partes: la foto original y pegada debajo la misma foto pero en blanco y negro. Lo que hay que hacer es usar la foto como fondo, de manera que se vea sólo la porcion de la foto que te interesa, es decir, o la mitad superior o la mitad inferior. Este es el código, no obstante, era muy fácil cogerlo del la propia página donde está el ejemplo (botón derecho del ratón, ver código fuente) Cita: Mikel. <!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" lang="es-es"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Color a blanco y negro</title> <style type="text/css"> .caja { margin: 0px auto; position: relative; width: 150px; height: 99px; } a { display: block; height: 100%; width: 100%; background: url(img/color_BN.jpg) no-repeat center top; } a:hover { background: url(img/color_BN.jpg) no-repeat center bottom; } </style> </head> <body> <div class="caja"><a href="#"></a></div> </body> </html> |
Este tema le ha gustado a 1 personas 
