Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Jquey: boton con dos imagenes y pie

Estas en el tema de Jquey: boton con dos imagenes y pie en el foro de Frameworks JS en Foros del Web. Hola! Que tal? Hace un rato estoy tratando de sacar algo y no me sale.... Queria ver si alguno me podria ayudar.. Tengo un boton ...
  #1 (permalink)  
Antiguo 11/08/2011, 14:26
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta Jquey: boton con dos imagenes y pie

Hola!

Que tal? Hace un rato estoy tratando de sacar algo y no me sale.... Queria ver si alguno me podria ayudar.. Tengo un boton hecho en flash, pero me gustaria pasarlo a HTML+Jquery...

La idea es la siguiente....

De fondo hay una foto... Y arriba hay una foto igual pero azulada. Cuando hago over en la foto azulada, se va a 0 el aplha (para que tenga un fecto de que adquiere color) y sale un pie con informacion.
Van a haber varios de estos botones conviviendo juntos.



Ahora bien, en el head llamo al jquery.. y al script q toy haciendo

Código:
<script src="lib/js/jquery.js" type="text/javascript"></script>
<script src="lib/js/hover.js" type="text/javascript"></script>
este es el script JS


Código:
$( function (){
       
			 
			var img = $('.imgTrabajo', this);
			var desc = $('.trabajoDescripcion', this);
			var descH = desc.height();
			img.css({opacity: 1});
			desc.height(0);
			$('a', this).hover(function() {
				img.stop().animate({opacity: 0});
				desc.stop().animate({height: descH});
			}, function() {
				img.stop().animate({opacity: 1});
				desc.stop().animate({height: 0});
			});
				

				
				
})
Este el html :

Código:
<div class="col-izq">
                    <div class="trabajo, borde-gris">
                              <a class="linkTrabajo" style="background:url(img/bt/buen_suceso_over.jpg)" title="Buen Suceso" href="http://www.ejemplo.com.ar/"><img src="img/bt/buen_suceso.jpg" alt="Buen Suceso" class="imgTrabajo"/></a>
                            <span class="trabajoDescripcion">Buen Suceso</span>
                    </div>
</div>
Y este el css

Código:
.col-izq {
	width:330px;
	height:auto;
	float:left;
}

.borde-gris { border:2px solid #434343; }

.trabajo {
	width: 326px;
	height: 146px;
	overflow: hidden;
}

.linkTrabajo {
	display:block;
	width:326px;
	height:146px;
}

.trabajoDescripcion {
	display: block;
	width: 326px;
	height: 35px;
	position:relative;
	background: #fff;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	line-height: 35px;
	text-align: right;
}

Basicamente la idea es... que el over me baje a 0 el alpha de la foto azulada, dejando ver el fondo del link que es la foto a color, y a su vez, el span que es el pie... ponerlo fuera del div trabajo.. escondiendolo con el overflow y haciedo que suba unos pixeles.


Espero que se haya entendido, muchas gracias!

Saludos

PD: El problema que tengo es que si pongo dos botones juntos al hacer over en 1, efectua la animacion en los dos (antes no me pasaba.. nose q toque, ya estoy mareado jeje). Y el otro, es que no se como resolver el tema del pie
  #2 (permalink)  
Antiguo 11/08/2011, 16:39
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Jquey: boton con dos imagenes y pie

Solucionado, muchas gracias de todas formas...

Última edición por topo87; 15/08/2011 a las 10:19 Razón: Solucionado

Etiquetas: html, imagenes, javascript, jquery, js, pie, botones
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 18:35.