Como hacer el siguiente Efecto

jilguerogabriel · #1 (**permalink**) 22/05/2008, 23:12

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

uokesita · #2 (**permalink**) 22/05/2008, 23:26

Sera con Flash?

jilguerogabriel · #3 (**permalink**) 23/05/2008, 08:13

Nono no es flash, es algun javascript pero no lo conosco :s.

daPhyre · #4 (**permalink**) 23/05/2008, 08:55

¿Tienes link a una de estas páginas? Suena muy interesante de averiguar...

Mikmoro · #5 (**permalink**) 23/05/2008, 10:59

¿Te refieres a esto?

Es muy, muy sencillo, aunque es un bonito truco.

Mikel.

daPhyre · #6 (**permalink**) 23/05/2008, 11:21

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...

Mikmoro · #7 (**permalink**) 23/05/2008, 11:35

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.

daPhyre · #8 (**permalink**) 23/05/2008, 11:56

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

Mikmoro · #9 (**permalink**) 23/05/2008, 11:59

Hombre, pasar una foto de color a blanco y negro con un código css lo veo difícil, pero quién sabe.

Mikel.

jilguerogabriel · #10 (**permalink**) 23/05/2008, 13:14

Es cierto, es ese efecto! Muy bueno
Pero como se hace? jaja
perdona necesito saberlo!

Jamati · #11 (**permalink**) 23/05/2008, 13:20

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 ?

jilguerogabriel · #12 (**permalink**) 23/05/2008, 13:23

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?

Mikmoro · #13 (**permalink**) 23/05/2008, 15:03

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.

jilguerogabriel · #14 (**permalink**) 23/05/2008, 15:29

Gracias Mikel!
Usaste una imagen rollover no?

Mikmoro · #15 (**permalink**) 23/05/2008, 17:07

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.

jilguerogabriel · #16 (**permalink**) 23/05/2008, 17:42

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!

Mikmoro · #17 (**permalink**) 23/05/2008, 17:47

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:

<!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>

Mikel.

jilguerogabriel · #18 (**permalink**) 23/05/2008, 18:06

Muchas gracias Mikel :)

me gustaria mostrarte mi pagina, pero todavia no pase los 30 dias de registracion :(

sera en otra ocasion

saludos!!