Aplicar las funciones de enlace a una capa de color

[harvey]

A ver, tengo unos botones con imagen, parte de esa imagen es un rectangulo de color en la que va un enlace tipo "home" y tal. Lo que quiero es que cuando pase por encima del boton con el puntero el rectangulo cambie de color. Vamos, el hover de los enlaces aplicado al rectangulo. Podria usar un rectangulo para guardar una imagen con una transparencia rectangular sobre la que iria el texto o bien dejar las imagenes del boton a parte rodeando el rectangulo de color que seria una capa con el texto dentro. La cuestión es ¿como le aplico el hover para que la capa cambie su color de fondo al pasar el puntero por encima?
Venga gracias.

[ratriarca]

saludos

mira.. para esto te recomiendo que mejor utilises javascript para modificar las propiedades del css ya que hover solo esta disponible para internet explorer 5.5 +



no te entendi bien lo de las imagenes pero si lo que quieres es cambiar el color de una imagen que usas como boton solo se puede hacer con javascript porque css no tiene estos valores ahora si lo que quieres es cambiar el fondo de un div en css eso es facil:


solo IE


div#tu_div{
background:pones el color o el enlace;
}

div#tu_div:hover{
background:pones el color o el enlace pero ya cambiado;
}



espero haberte sido de ayuda pero te recomiendo java script si te decides a hacer lo en javascript ponlo y te mando una funcion

[harvey]

Si solo funciona en explorer... no sé creo que no me vale. Ya entrando por uva con lo de meter javascript lo hice con imagenes de sustitución con dremweaver pero si tu javascript no es tan aparatoso ponmelo.

Venga gracias.

[JavierB]

Hola harvey

Puedes utilizar esto:

Código:

<div onmouseover = "this.style.background = 'red'" onmouseout = "this.style.background = 'white'">

Movido al foro de JavaScript desde Css.

Saludos,

[harvey]

Ante todo disculpa por que este post lleva css y veo que has movido el tema a java script.
¿Estas seguro que con css no se puede?
Mira he rescatado este codigo de un menu de esos que hace el programita CSS Tab Designer 2. En esos casos lo que hace es designar que la parte que se ve en la capa es una determinada zona de la imagen. En mi caso lo que quiero es usar esos a:visited,hover, lo que sea en un div para idicarle colores de background distintos. El ejemplo del menu este usa una lista pero eso no me vale porque cada item de mi menu lleva un color diferente asi que no puedo generalizar los li.

<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */
#menu {
width: 80px;
margin: 10px;
}
#menu li a {
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
display: block;
background: url(menu1.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu li #current {
background: url(menu1.gif) 0 -46px;
padding: 8px 0 0 10px;
}
#menu li a:active {
background: url(menu1.gif) 0 -46px;
padding: 8px 0 0 10px;
}