Foros del Web » Creando para Internet » CSS »

Cambiar imagen logo,con hover

Estas en el tema de Cambiar imagen logo,con hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/02/2009, 12:07
 
Fecha de Ingreso: julio-2007
Mensajes: 57
Antigüedad: 10 años, 4 meses
Puntos: 1
Cambiar imagen logo,con hover

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
  #2 (permalink)  
Antiguo 24/02/2009, 13:28
 
Fecha de Ingreso: julio-2007
Mensajes: 57
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Cambiar imagen logo,con hover

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
  #3 (permalink)  
Antiguo 24/02/2009, 17:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar imagen logo,con hover

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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 24/02/2009, 20:59
 
Fecha de Ingreso: julio-2007
Mensajes: 57
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Cambiar imagen logo,con hover

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #5 (permalink)  
Antiguo 25/02/2009, 06:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar imagen logo,con hover

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>
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 25/02/2009, 07:42
 
Fecha de Ingreso: julio-2007
Mensajes: 57
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Cambiar imagen logo,con hover

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #7 (permalink)  
Antiguo 25/02/2009, 21:46
 
Fecha de Ingreso: febrero-2009
Ubicación: Colombia
Mensajes: 20
Antigüedad: 8 años, 9 meses
Puntos: 1
Respuesta: Cambiar imagen logo,con hover

Para image rollover con css yo siempre uso este codigo:

Cita:
<style type="text/css">
#link{
width:100px;
height:100px;
display:block;
background:url(rollover-image.jpg) no-repeat 0 0;
}

#link:hover
{
background-position: 0 -100px;
}

#link span
{
display: none;
}
</style>
</head>

<body>
<a href=" " id="link" title="1234"><span></span></a>
</body>
</html>
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.
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 17:25.