Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/03/2010, 14:02
ed-209
 
Fecha de Ingreso: noviembre-2003
Mensajes: 22
Antigüedad: 20 años, 4 meses
Puntos: 1
Información script para "sacar la ropa" ;)

Hola amigos, aca comparto un sencillo script que, obviamente no saca la ropa magicamente, si no que simplemente va mostrando una imagen por encima de otra a medida que se pasa el mouse. Ej: http://gabrieled209.webuda.com/cambiarimagen/

CSS:
.imgantes2 {
float:left;
/*deben tener el mismo tamaño que la imagen*/
width:240px;
height:559px;

border:1px solid #000000;
position:relative;
background-position:0px 0px;
background-image:url(antes.jpg)
}

.imgdespues2{
width:240px;
height:150px;/*alto de la parte de la imagen que aperce encima que queres que se vea*/
position:absolute;
background-image:url(despues.jpg);
background-position:16px -0px;
top:0px;
visibility:hidden
}

JavaScript (jQuery):

var p2 = $(".imgantes2");
var pos2 = p2.position();

$('.imgantes2').mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
var posicion = e.pageY - pos2.top;
if (posicion>=409){
$(".imgdespues2").css({
'visibility':'visible',
'background-position':'16px -409px',
'top':'409px'
});
}
else{
$(".imgdespues2").css({
'visibility':'visible',
'background-position':'16px -'+posicion+'px',
'top':posicion+'px'
});
}
$("#info").text("( e.pageX, e.pageY ) - " + pageCoords + "Imgantes pos: "+posicion);
});

$('.imgantes2').mouseout(function(e){
//if ($(e.relatedTarget).attr('class')!='imgantes' || $(e.relatedTarget).attr('class')!='imgdespues')
if (!$(e.relatedTarget).hasClass('imgantes2'))
{
$(".imgdespues2").css('visibility','hidden');
}
});

HTML:

<div class="imgantes2">
<div class="imgdespues2"></div>
</div>

Igual en el codigo funte de la pagina aprece bien. A partir de aca se puede mejorar y cambiar a gusto, acepto crititcas y sugerencias.

No se si estara muy repetido en efecto asi, igual no esta demas para el que lo necesite lo encuentre mas rapido....

Espero que les sirva, saludos!

Última edición por ed-209; 04/03/2010 a las 14:20