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

MeneXe · #1 (**permalink**) 05/03/2009, 06:12

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]

ruben-et · #2 (**permalink**) 05/03/2009, 06:25

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

MeneXe · #3 (**permalink**) 05/03/2009, 06:39

Cita:

Iniciado por ruben-et

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 )

ruben-et · #4 (**permalink**) 05/03/2009, 06:53

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

talmente · #5 (**permalink**) 05/03/2009, 08:07

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.

ruben-et · #6 (**permalink**) 05/03/2009, 08:29

muy bien
ya se algo más

MeneXe · #7 (**permalink**) 09/03/2009, 09:40

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

Dalvenjha · #8 (**permalink**) 09/03/2009, 10:15

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<div id="uno">
<a href="#" id="unomas">Yo soy un link</a>
</div>

Entonces tu CSS debería ser:

Código CSS:

Ver original<!-- primero ponemos el CSS del div que quieres que sea el contenedor, 
solo voy a establecer el ancho y el alto-->
 
div#uno{
width:200px;
height:80px;
}
 
 
<!--Y ahora el CSS del link para que ocupe todo ese espacio-->
 
a#unomas{
display:block; <----- Importante, tenemos que darle un display block.
width:100&#37;;
height:100%;
background: url(miimagen.jpg) repeat left top;
}
 
 
<!--Y ahora el cl&#225;sico del hover -->
 
a#unomas:hover{
background: url(miotraimagen.jpg) repeat left top;
}

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!!

MeneXe · #9 (**permalink**) 09/03/2009, 11:13

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.

talmente · #10 (**permalink**) 09/03/2009, 12:48

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

MeneXe · #11 (**permalink**) 11/03/2009, 04:05

Cita:

Iniciado por talmente

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

talmente · #12 (**permalink**) 11/03/2009, 05:06

Ok, pincha ahora ya lo he vuelto a subir.

Mikmoro · #13 (**permalink**) 11/03/2009, 16:48

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.

talmente · #14 (**permalink**) 12/03/2009, 02:55

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?

MeneXe · #15 (**permalink**) 12/03/2009, 06:32

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!

MeneXe · #16 (**permalink**) 12/03/2009, 06:37

Cita:

Iniciado por Mikmoro

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 :)

Mikmoro · #17 (**permalink**) 12/03/2009, 08:57

Cita:

Iniciado por talmente

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

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.

ruben-et · #18 (**permalink**) 12/03/2009, 09:11

Aprendiendo con Mikmoro
Gracias amigo

talmente · #19 (**permalink**) 12/03/2009, 12:35

Cita:

Iniciado por Mikmoro

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.

MeneXe · #20 (**permalink**) 13/03/2009, 15:16

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.