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