Cambiar imagen logo,con hover

juampick · #1 (**permalink**) 24/02/2009, 12:07

Hola, espero que anden bien después de tanto tiempo!.
Vengo a Uds, si me pueden ayudar tengo esta web que estoy adaptando:

www.compubitweb.com/vde

que tiene el logo, lo que quiero hacer es cuando se haga un hover sobre él, que cambie la imagen del logo, que es igual, solamente con los colores invertidos.
Ahi les pongo el css que tengo del logo:
CSS:

Código:

a#logo{
  top: 80px;
  left:100px;

  position: absolute;
}

a#logo:hover{
  background: url(images/logovde6coloresinver.png);
  display:block;
}

Nosé cual es el inconveniente. Directamente no hace nada cuando paso el mouse arriba.

Saludos y desde ya: Gracias

juampick · #2 (**permalink**) 24/02/2009, 13:28

Hola, acabo de poder cargar la imagen, el problema es que se ve pero como de fondo y no la puedo poner delante de la otra.
Este es el código:

Código:

#logo{
  top: 80px;
  left:100px;
  position: absolute;
}

a#logo:hover{
  background: url(logovde7invertidoscolor.png);
  display:block;
  z-index:1;
}

Intenté usar la propiedad z-index, pero no logro realizarlo.
Espero que a alguien se le ocurra algo. Saludos

Mikmoro · #3 (**permalink**) 24/02/2009, 17:00

Supongo que lo lógico sería que colocaras la imagen que deseas reemplazar como fondo del enlace en lugar del javascript que estás usando.

juampick · #4 (**permalink**) 24/02/2009, 20:59

Cita:

Iniciado por Mikmoro

Supongo que lo lógico sería que colocaras la imagen que deseas reemplazar como fondo del enlace en lugar del javascript que estás usando.

Gracias por responder, pero no entiendo bien tu idea. Si podés explicarmela más claramente te agradecería.
Yo lo logré hacer con javascript, nosé si es correcto. Saludos

Mikmoro · #5 (**permalink**) 25/02/2009, 06:15

Sí, mira, es muy sencillito de hacer. Este es el ejemplo

Y este el código:

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" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a#logo {display: block;
width: 300px;
height: 87px;
background: #666 url(img/logo.png) no-repeat;
}
a#logo:hover {background: #666 url(img/logovde7completoinvertido.png) no-repeat;
}
</style>
</head>
<body>
<div id="header">
<a href="http://www.compubitweb.com/vde/" id="logo"></a>
</div>
</body>
</html>

juampick · #6 (**permalink**) 25/02/2009, 07:42

Cita:

Iniciado por Mikmoro

Sí, mira, es muy sencillito de hacer. Este es el ejemplo

Y este el código:

Gracias che. Voy a probar, porque el theme que uso en WP tiene una opcion y me está enloqueciendo el php.

Te consulto algo ya que estoy.
En la web que estoy adaptadando tiene botones que son tipo tabs, si? Bueno la cosa que use un plugin para redireccionar las paginas a categorias. Perfecto, anda todo bien hasta acá.
El problema es que así, tengo 6 botones, de los cuales, por ejemplo: Home, Programación son paginas redireccionadas, y cuando estan activas no se cambian el color a blanco, como lo hacen los otros botones. Y así queda feo, porque algunos lo hacen y otros no, ese efecto de pestaña. Se entiende? Qué tendré que tocar en el codigo?

Acá esta el css: http://www.compubitweb.com/vde/wp-co...sion/style.css

Gracias por tu ayuda...

Saludos

Juampi

coljung · #7 (**permalink**) 25/02/2009, 21:46

Para image rollover con css yo siempre uso este codigo:

Cita:

Y en este caso la imagen es una sola pero solo muestro una parte de ella, cuando hago rollover con el mouse muestro la otra parte de la imagen.