script para "sacar la ropa" ;)

[ed-209]

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!

[maycolalvarez]

interesante XD, pero prefiero Flash, aunque esta es muy buena alternativa

[cristian_cena]

Uh que bueno jaja!! Lo voy a estudiar en una de esas lo aplico por ahi . Hay un muchacho que construye este tipo de alternativas, se llama roman cortes, vi unos trabajos suyos como las meninas 3d y la lata de cocacola con css y me parecieron muy interesantes.