Foros del Web » Creando para Internet » CSS »

Objetivo: Señalar enlace y que cambie el fondo.

Estas en el tema de Objetivo: Señalar enlace y que cambie el fondo. en el foro de CSS en Foros del Web. Hola, lo que quiero hacer es que cambie la imagen de fondo al señalar el enlace, hice un tabla con css del tamaño de la ...
  #1 (permalink)  
Antiguo 17/11/2008, 17:34
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Exclamación Objetivo: Señalar enlace y que cambie el fondo.

Hola, lo que quiero hacer es que cambie la imagen de fondo al señalar el enlace, hice un tabla con css del tamaño de la imagen que tengo lista para que sea el nuevo fondo, no se como hacer para que cambie al ser señalado el enlace.


Se que es algo muy básico pero no lo encuentro :S

Recuerden, señalar un vinculo y que cambie la imagen de fondo.


Gracias! espero ansioso
  #2 (permalink)  
Antiguo 17/11/2008, 17:41
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Mira esto:
Rollover con imagen de fondo...

Un saludo!!

Aresillo!!
  #3 (permalink)  
Antiguo 17/11/2008, 18:11
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Cita:
Iniciado por Aresillo Ver Mensaje
Mira esto:
Rollover con imagen de fondo...

Un saludo!!

Aresillo!!
Gracias Man! te pasaste!
  #4 (permalink)  
Antiguo 17/11/2008, 18:32
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Bueno, igualmente no me sale. tengo esto mira...

#apDiv2 {
position:absolute;
left:220px;
top:462px;
width:122px;
height:59px;
z-index:2;

;
}


y despues esto...

<div id="apDiv2"><a href="www.google.com.ar">sdd</a></div>


¿Como hago entonces? Que codigo tengo que añadir y donde...

Me mandaste el menu completo que va con "li" etc.. y la verdad me re confunde, yo simplemente tengo todo separadito, no se despliega nada, usé el dreamweaver con la herramienta "Dibujar Div PA" .

Hice un rectangulo del tamaño de la imagen que tengo para fondo al ser señalado.

¿Que tengo que hacer? Gracias
  #5 (permalink)  
Antiguo 17/11/2008, 18:45
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

El "código mágico" que lo hace en el ejemplo en araudi.net ( hola Mikmoro) es este:
Código css:
Ver original
  1. .menusup li a:hover {color:#fff;
  2. background:#000 url(../img/cambio.gif);
  3. }
Fíjate que usa la pseudoclase "hover" (al estar el puntero del ratón encima del enlace) para cambiar el fondo (background).
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 17/11/2008, 18:52
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Pues es que depende un poco de varias cosas...
Yo te recomendaría que la imagen de background y la que aparecerá cuando tienes el ratón encima sean igual para todos los links del menú...
Sino, es un lío para que cuadre todo...(yo ahora estoy con uno... y es un poco matada...)

Lo mejor que puedes hacer es tener los links del menú en una lista porque en realidad, son una lista, ya sea vertical u horizontal... así que mejor que tenerlos separaditos mételos en una lista...
Además, es más fácil cambiar cosas...

Dime si es un background y un background cuando te pones encima por imagen o si son iguales para todos...

Un saludo..

Aresillo!!
  #7 (permalink)  
Antiguo 17/11/2008, 20:07
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

sigo sin entender bien...

Lo que tengo es diferentes "divs" para cada link, y en cada link quiero que al señalar cambie el fondo de ese "div".

El anterior fondo (sin señalar) quedaria transparente.

Pero al señalar con una imagen. No se como hacerlo
  #8 (permalink)  
Antiguo 18/11/2008, 02:22
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Pues lo que tienes que hacer se base en lo que ya te ha dicho david..
Hover significa "cuando poner el ratón encima de la palabra" asi que tienes que utilizar dicha propiedad...

En tu ejemplo tienes el div:
Código:
<div id="apDiv2"><a href="www.google.com.ar">sdd</a></div>
Y el código CSS:
Código:
#apDiv2 {
position:absolute;
left:220px;
top:462px;
width:122px;
height:59px;
z-index:2;
background: url(ruta a la imagen de fondo);
}
A este código le tienes que poner un background, te lo he puesto en negrita


Lo que te falta para aplicarlo es esto:
Código:
#apDiv2 a:hover {
background: url(ruta a la imagen de fondo cuando pones el ratón encima);
}
Lo que le dices es que el enlace, al pasar el ratón por encima utilice ese fondo.
También puedes decirle que al pasar por encima cambie el color de la letra:
color:#xxxxxx;
Que se subraye o no:
text-decoration: underline o none respectivamente

Y lo que se te ocurra..

Un saludo!

Aresillo!!

Última edición por Aresillo; 18/11/2008 a las 08:49
  #9 (permalink)  
Antiguo 18/11/2008, 08:20
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Objetivo: Señalar enlace y que cambie el fondo.

Cita:
Iniciado por Aresillo Ver Mensaje
Pues lo que tienes que hacer se base en lo que ya te ha dicho david..
Hover significa "cuando poner el ratón encima de la palabra" asi que tienes que utilizar dicha propiedad...

En tu ejemplo tienes el div:
Código:
<div id="apDiv2"><a href="www.google.com.ar">sdd</a></div>
Y el código CSS:
Código:
#apDiv2 {
position:absolute;
left:220px;
top:462px;
width:122px;
height:59px;
z-index:2;
background: url(ruta a la imagen de fondo);
}
A este código le tienes que poner un background, te lo he puesto en negrita


Lo que te falta para aplicarlo es esto:
Código:
#apDiv2 a:hover {
background: url(ruta a la imagen de fondo cuando pones el ratón encima);
}
Lo que le dices es que el enlace, al pasar el ratón por encima utilice ese fondo.
Tienes puedes decir que al pasar por encima cambie el color de la letra:
color:#xxxxxx;
Que se subraye o no:
text-decoration: underline o none respectivamente

Y lo que se te ocurra..

Un saludo!

Aresillo!!

Esa es la respuesta que necesitaba!!!!!!!! :D!!!

1.000.000 de gracias!!!!!! :D, buenisimo, de verdad, muchisisisimas gracias, ahora entendi ^^.

Habia visto un ejemplo pero no entendia bien si se repetia el "div" o que... ahora veo que eso expecifica los detalles del "a" (enlace) del "div" "x".

Muchas gracias :)
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:08.