Foros del Web » Creando para Internet » CSS »

¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Estas en el tema de ¿Como lograr que al señalar el link Cambie el fondo del Div's ? en el foro de CSS en Foros del Web. Bueno, quiero poner un meno donde cada link tendra un fondo distinto, o sea cada link tendra su propio Div y su fondo, y quiero ...
  #1 (permalink)  
Antiguo 05/03/2009, 06:12
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Bueno, quiero poner un meno donde cada link tendra un fondo distinto, o sea cada link tendra su propio Div y su fondo, y quiero al señalar el Link (que es texto) se cambie el fondo por otro que yo desee.

Aclaracion:Los fondos son imagenes.

Me han respondido ya esto, pero el error que me da es que solamente cambia el fondo muy cercano a las letras y no el fondo de todo el Div.


Por favor si pueden agregarme al MSN Messenger para ayudarme se los agradezco, me canse de preguntar esto por aca y no logre los resultados esperados, me di por vencido y hacia como 2 o 3 meses que no me pasaba a pedirles ayuda.

Espero esta vez logre lo que busco, si me agregan al msn les paso los archivos de lo que estoy armando por si no me comprenden.

Muchisimas gracias, este foro me ha ayudado muchisimo y lo considero el mejor foro sobre diseño web en español

mi msn: [email protected]
  #2 (permalink)  
Antiguo 05/03/2009, 06:25
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

hola menexe
yo te podria ayudar si lo quisieras hacer con DreamWeaver CS3 y trabajando con capas, con CSS no se que decirte.
di algo si optas por esto
saludos
  #3 (permalink)  
Antiguo 05/03/2009, 06:39
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Cita:
Iniciado por ruben-et Ver Mensaje
hola menexe
yo te podria ayudar si lo quisieras hacer con DreamWeaver CS3 y trabajando con capas, con CSS no se que decirte.
di algo si optas por esto
saludos
Okey, no me importa el metodo jejeje, mientras funcione en cualquier navegador esta perfecto, agregame al msn, gracias.


NOTA: (Si logro mi objetivo expondré en este POST el metodo que utilizé y la fuente, o sea quien me ayudo :P )
  #4 (permalink)  
Antiguo 05/03/2009, 06:53
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Lo siento pero no puedo añadirte al msn porque no tengo en el curro.
como te decia para lograr esto lo puedes hacer en DW
1-seleccina la imagen
2- ves a ventana comportamiento
3- añade un comportamiento llamado intercambiar imagen
4- selecciona la imagen que sustituye a la original
5- sal guardando
veras que se ha añadido un comportamiento en el evento onmosue over y otro en el evento onmouseout, esto te abrira puertas a hacer otras muchas cosas con esta herramienta.
pruebalo y me dices.
saludos
  #5 (permalink)  
Antiguo 05/03/2009, 08:07
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 9 años
Puntos: 4
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Te mando un código que puedes utilizar perfectamente, es muy básico. Lo primero es que no necesitas un div para cada Link, y menos que te lo haga Dw. Mira lo i fíjate en como esta echo. En los fondo de “a” y “hover” pones los tuyos y en “a” rectificas el tamaño para que se vea toda la imagen.

Código:
ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
li {
	margin: 0px;
	padding: 0px;
}
a {
	display: block;
	width: 110px;
	margin: 0px;
	padding: 5px 0px 0px;
	height: 25px;
	background: url(css/i/fondo.jpg);
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
}
a:hover {
background: url(css/i/fondoBactive.png);
}
Código:
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
Con esto te puedes enterar por donde van los tiro, después te surgirán otros problemas. Que también resolverás.
  #6 (permalink)  
Antiguo 05/03/2009, 08:29
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

muy bien
ya se algo más
  #7 (permalink)  
Antiguo 09/03/2009, 10:40
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Voy a intentar ambas, aunque creo que la segunda no servira, porque resulta que tengo un fondo independiente para cada link, por eso pensaba en hacer un div por cada link. Primero veré si la tecnica del DW me funciona, sino provaré la otra.

Muchisimas gracias a ambos :D
  #8 (permalink)  
Antiguo 09/03/2009, 11:15
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 8 años, 9 meses
Puntos: 53
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

uhmmm, a ver veamos, quieres crear un div por Link y que este cambie de imágen cada vez que hagas en hover, pues es algo sencillo de hacer. Pero quiero saber algo más, el div que creas para cada link ¿Tienes algún otro tipo de contenido o es solo el link?

Si es solo el link, podrías hacer lo siguiente:

Digamos que tu estructura es esta:

Código html:
Ver original
  1. <div id="uno">
  2. <a href="#" id="unomas">Yo soy un link</a>
  3. </div>


Entonces tu CSS debería ser:

Código CSS:
Ver original
  1. <!-- primero ponemos el CSS del div que quieres que sea el contenedor,
  2. solo voy a establecer el ancho y el alto-->
  3.  
  4. div#uno{
  5. width:200px;
  6. height:80px;
  7. }
  8.  
  9.  
  10. <!--Y ahora el CSS del link para que ocupe todo ese espacio-->
  11.  
  12. a#unomas{
  13. display:block; <----- Importante, tenemos que darle un display block.
  14. width:100&#37;;
  15. height:100%;
  16. background: url(miimagen.jpg) repeat left top;
  17. }
  18.  
  19.  
  20. <!--Y ahora el cl&#225;sico del hover -->
  21.  
  22. a#unomas:hover{
  23. background: url(miotraimagen.jpg) repeat left top;
  24. }

Simple y sencillo de hacer. El display Block, le permite al link especificar propiedades como el ancho, el alto, la alineación de texto, etc etc.


Espero que te sirva, por cierto, la ayuda se pide en el foro, no se pide que te agreguen al mail.

saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #9 (permalink)  
Antiguo 09/03/2009, 12:13
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Ruben-et creo que hice lo que me dijiste que haga, la verdad que no encontre la forma de llegar como lo haces tu, lo hice a mi manera pero luego de casi terminar recorde el problema por el cual no use sustitucion de imagen.

Repaso mi experiencia:

Voy a -> Insertar -> Objetos de Imagen -> Imagen de sustitucion.

Ahi coloco las 2 imagenes.

Luego me quedan las 2 imagenes, todo perfecto.

Al señalar cambia, pero lo que cambia no es un fondo, sino que cambia una imagen, y no se puede poner Texto sobre la imagen, entonces lo que hice fue poner otro Div sobre el div que tiene la imagen de sustitucion, y ahi puse el texto con el link.

Ahora, al ir a probar los resultados, si señalo la imagen esta cambia, pero si señalo el Link como esta en otro div diferente la imagen de atras vuelve a su esta "sin señalar" ya que no esta siendo señalado directamente, sino que estoy señalando la capa que esta encima, aca dejo los archivos para que los vean.

Click Aquí para descargar archivo



PD: ahora voy a revisar las otras propuestas a ver si me sirven.
PD: perdon no sabia que no se podia pedir que agreguen al msn, la verdad que estoy con este problema trabado hace 3 meses y no puedo terminar mi pagina por esto.


Acabo de leer el post de Dalvenjha y me parece que eso funcionara a la perfeccion, me pondre manos a la obra.
  #10 (permalink)  
Antiguo 09/03/2009, 13:48
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 9 años
Puntos: 4
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

La solución que te doy es perfectamente valida, si quieres una imagen para cada botón lo haces con classes,


Código:
.linkuno { background: url(imagen/productosbg.jpg); }
y al hover

Código:
a:hover.linkuno  { background: url(css/i/fondoB.png); }
Otra cosa, los nombres de las imágenes sin espacios y del mismo tamaño si forman parte de un mismo menú.


Edito

Te pongo un ejemplo simple

Última edición por talmente; 09/03/2009 a las 14:27
  #11 (permalink)  
Antiguo 11/03/2009, 05:05
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Cita:
Iniciado por talmente Ver Mensaje
La solución que te doy es perfectamente valida, si quieres una imagen para cada botón lo haces con classes,


Código:
.linkuno { background: url(imagen/productosbg.jpg); }
y al hover

Código:
a:hover.linkuno  { background: url(css/i/fondoB.png); }
Otra cosa, los nombres de las imágenes sin espacios y del mismo tamaño si forman parte de un mismo menú.


Edito

Te pongo un ejemplo simple
no veo tu ejemplo, en unas horas tendre tiempo para provar 1 por 1 lo que me dicen
  #12 (permalink)  
Antiguo 11/03/2009, 06:06
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 9 años
Puntos: 4
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Ok, pincha ahora ya lo he vuelto a subir.
  #13 (permalink)  
Antiguo 11/03/2009, 17:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

El mismo ejemplo pero algo más práctico y rápido en su funcionamiento:
ejemplo

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-es" lang="es-es">
<head>
<title></title>
<style type="text/css">
ul {margin: 0px;
padding: 0px;
list-style: none;
}
li {margin: 0px;
padding: 0px 0px 15px;
}
a {display: block;
width: 100px;
margin: 0px;
padding: 5px 0px 0px;
height: 32px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
background: url(img/fondos.png) no-repeat;
}
.linkdos {background-position: top right;}
a.linkuno:hover {background-position: left -48px;}
a.linkdos:hover {background-position: right -48px;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="linkuno">link 1</a></li>
<li><a href="#" class="linkdos">link 2</a></li>
</ul>
</body>
</html>
Una sola petición y un cambio de fondo instantáneo sin parpadeo.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 12/03/2009, 03:55
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 9 años
Puntos: 4
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Lo del parpadeo perfecto, pero me quieres explicar, para que pueda dormir esta noche, como lo haces con un solo imagen en el tag <a> background: url(img/fondos.png) no-repeat;, por que yo no veo más fondo que ese.


Edito:
Vale ya lo he visto una sola imagen y juegas con la posición de manera que cambia el color. Muy bueno, con tigo siempre se aprende algo colega. Un saludo

Otra cosa entre a:hover.linkuno y a.linkuno:hover ¿hay alguna diferencia?

Última edición por talmente; 12/03/2009 a las 04:13
  #15 (permalink)  
Antiguo 12/03/2009, 07:32
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
De acuerdo Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Bueno, con las 2 ultimas respuestas y sus ejemplos me queda claro de que podré lograrlo siguiendo sus pasos, 25 millones de gracias a todos los que gastaron su tiempo en ayudarme, lograron entender lo que necesitaba y darme una solucion perfecta, gracias de nuevo!
  #16 (permalink)  
Antiguo 12/03/2009, 07:37
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Cita:
Iniciado por Mikmoro Ver Mensaje
El mismo ejemplo pero algo más práctico y rápido en su funcionamiento:
ejemplo


Una sola petición y un cambio de fondo instantáneo sin parpadeo.

A ver si entendi bien, lo que hiciste fue poner 1 imagen de fondo que contiene los 4 colores verdad? y luego le diste a que depende donde señalemos veamos cierto sector de la imagen, es una tactica muy inteligente, pero me parece que me llevaria mas tiempo aplicarla, pero muy buena idea, a futuro diseñare la imagen desde un comienzo con esa idea :)
  #17 (permalink)  
Antiguo 12/03/2009, 09:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Cita:
Iniciado por talmente Ver Mensaje
Vale ya lo he visto una sola imagen y juegas con la posición de manera que cambia el color.

Otra cosa entre a:hover.linkuno y a.linkuno:hover ¿hay alguna diferencia?
Así es, es una sóla imagen que contiene las 4.
Después de que hice eso por primera vez, descubrí que hasta tenía nombre la técnica (que no recuerdo)

Yo soy en espíritu inventor, lo malo es que suelo inventar cosas que ya están inventadas
Siempre me queda el orgullo de haber descubierto cosas, pero no he sido el primero en hacerlo

Creo que no hay diferencia entre a:hover.linkuno y a.linkuno:hover (no estoy seguro al 100%), pero para mi es preferible identificar el enlace con su clase y luego aplicarle el :hover (a.linkuno:hover). Diría que la otra manera puede causar problemas, pero no estoy seguro porque no recuerdo bien. Algún día lo recordaremos, supongo.
Cita:
Iniciado por MeneXe Ver Mensaje
A ver si entendi bien, lo que hiciste fue poner 1 imagen de fondo que contiene los 4 colores verdad? y luego le diste a que depende donde señalemos veamos cierto sector de la imagen, es una tactica muy inteligente, pero me parece que me llevaria mas tiempo aplicarla, pero muy buena idea, a futuro diseñare la imagen desde un comienzo con esa idea :)
Sí, así es. Parece que cuesta más, pero una vez montada la imagen es más rápido y cómodo. No siempre sirve: como todo, depende de lo que estés haciendo. En el caso del ejemplo sí era práctico usarlo.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 12/03/2009 a las 10:13 Razón: Corrección
  #18 (permalink)  
Antiguo 12/03/2009, 10:11
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Aprendiendo con Mikmoro
Gracias amigo
  #19 (permalink)  
Antiguo 12/03/2009, 13:35
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 9 años
Puntos: 4
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Cita:
Iniciado por Mikmoro Ver Mensaje

Yo soy en espíritu inventor, lo malo es que suelo inventar cosas que ya están inventadas
Siempre me queda el orgullo de haber descubierto cosas, pero no he sido el primero en hacerlo


Ha seguir bien.
  #20 (permalink)  
Antiguo 13/03/2009, 16:16
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: ¿Como lograr que al señalar el link Cambie el fondo del Div's ?

Bueno foreros, he logrado lo que queria en primer momento.
Al señalar cambia el fondo.

Ahora el problema es otro.

El fondo tiene preparado aproposito un sector en donde debe ir el texto, como veran en el archivo el texto no coincide. Si le pongo Margen entonces tambien se desplaza el fondo junto con el texto.

Como hago para mover el texto sin mover el fondo?
O el metodo que sea para que coincida, aca les dejo el archivo de como va quedando la web y como aplique lo enseñado tan amablemente por ustedes :D

Click aqui para descargar la Web con sus imagenes

http://rapidshare.com/files/20888525...ento1.rar.html


Muchisimas gracias, estoy atento a sus respuestas. Muy util todo lo que me enseñaron.
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 05:47.