Foros del Web » Programando para Internet » Jquery »

jquery cambiar imagen de fondo en menu

Estas en el tema de jquery cambiar imagen de fondo en menu en el foro de Jquery en Foros del Web. Hola a todos. Pregunto aqui después de mirar millones de ejemplos y API de jquery. Mi problema es el siguiente: Tengo un menu, donde en ...
  #1 (permalink)  
Antiguo 14/12/2010, 05:12
 
Fecha de Ingreso: diciembre-2010
Ubicación: A Coruña, Galicia
Mensajes: 4
Antigüedad: 9 años, 1 mes
Puntos: 0
jquery cambiar imagen de fondo en menu

Hola a todos.

Pregunto aqui después de mirar millones de ejemplos y API de jquery.

Mi problema es el siguiente:

Tengo un menu, donde en la parte superior estan las opciones, y quiero que al ponerme encima de una de ellas, se cargue en un contenedor una foto. Añado efecto fadein y fadeout, es decir, al pasar de una opcion a otra, desaparece la imagen de una opción y aparece otra.

La solucion planteada es la siguiente:
Hago una lista, y cada opción de la lista tiene dos capas, la del texto y la imagen de fondo. Para posicionarlas uso posiciones absolutas: el texto lo coloco horizontalmente y las imagenes de fondo, al ocupar todo el espacio, las pongo con top:0 y left:0.

En el css le marco que solo una imagen esta activa, el resto le pongo display:none.

Mi problema es que consigo hacer que la imagen que esta presente desaparezca al pasar por encima del link con el fadeout, pero no consigo hacer que aparezca la siguiente.

Este es el marcado
Código HTML:
<div id="menu_pazos">
      <ul>
        <li id="menu_pazos_brexo">
          <div class="nombre"><a href="#">PAZO DE BREXO</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_orto">
          <div class="nombre"><a href="#">PAZO DE ORTO</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_cenador">
          <div class="nombre" ><a href="#">EL CENADOR</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_loureiros">
          <div class="nombre"><a href="#">OS LOUREIROS</a></div>
          <div class="foto"></div>
        </li>
      </ul>
    </div> 
Este es el css
Código HTML:
#menu_pazos
{
	border:solid 1px #336699;
	width:900px;
	height:400px;
	padding:0;
	margin:0;
	position:relative;
}

#menu_pazos ul
{
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	top:0;
	left:0;
}

#menu_pazos ul li
{
	padding:0;
	margin:0;
	position:absolute;
	left:0;
	top:0;
}

#menu_pazos ul li .nombre
{
	width:224px;
	text-align:center;
	position:absolute;
	top:0;
	z-index:2;
	border-bottom:solid 1px #336699;
}

#menu_pazos ul li .foto
{
	width:900px;
	height:400px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

#menu_pazos_brexo .nombre
{
	left:0;
}

#menu_pazos_brexo .foto
{
	background-image:url(../images/layout/menu-pazos-brexo.png);
}

#menu_pazos_orto .nombre
{
	left:225px;
}

#menu_pazos_orto .foto
{
	background-image:url(../images/layout/menu-pazos-orto.png);
	display:none;
}

#menu_pazos_cenador .nombre
{
	left:450px;
}

#menu_pazos_loureiros .nombre
{
	left:675px;
}

#menu_pazos a
{
	text-decoration:none;
	color:#999;
}

#menu_pazos a:hover
{
	text-decoration:none;
	color:#FFF;
}
Y esto es lo que llevo echo de jquery
Código:
$(function() {
	$('#menu_pazos > ul > li > .nombre').hover(
        function () 
		{
			var $this=$(this);
			$('.foto',$this.parent().parent()).css({display:inherit});		
        },
        function () 
		{}
    );
});
Gracias de antemano por la atención prestada

Etiquetas: fondo
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 13:01.