L'image disparaît lorsque je change de css clip: rect propriété

Question

J'utilise clip: rect pour découper des images en vignettes et je veux randomiser le placement du rectangle de clip sur le rollover. mon code:

$('.itembox').mouseover(function() { 
    var img = $(this).find('img'); 
    var width = img[0].width; 
    var height = img[0].height; 
    var clipwidth = Math.floor($(this).width()); 
    var clipheight = Math.floor($(this).height()); 

    var widthrange = width - clipwidth; 
    var heightrange = height - clipheight; 

    var x = Math.floor(Math.random() * widthrange); 
    var y = Math.floor(Math.random() * heightrange); 
    var x2 = x + clipwidth; 
    var y2 = y + clipheight; 

    img.css('clip', 'rect('+x+'px '+x2+'px '+y+'px '+y2+'px)'); 
    $(this).children('.itemboxbg').show(); 
    $(this).css({'color' : 'white'}); 

}); 

Il fonctionne très bien avec le css prédéfini:

.itemboxbg { 
    border: none; 
    position:absolute; 
    width:193px; 
    height:273px; 
    z-index:0; 
} 
.itemboxbg img { 
    border: none; 
    position: absolute; 
    clip: rect(0px 193px 273px 0px); 
} 

mais quand l'événement se déclenche en cas de renversement et il change l'image disparaît css l'. le CSS est fin par exemple:

<img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);"> 

toute aide serait appréciée.

Answer 1

stupide, il aurait dû être:

img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)'); 

depuis clip: rect est défini

rect(<top> <right> <bottom> <left>); 

où <top> et <bottom> spécifient les décalages à partir du bord de la bordure supérieure de la boîte, et <right> et <left> Spécifiez les décalages à partir du bord gauche de la boîte.

pas une solution encore que, puisque l'image ne semble pas dans la boîte, peut-être que je devrais utiliser la position de fond à la place

edit: ok changer les & gauche absolu top positions déplacé l'image dans la boîte:

img.css('left', -x+'px'); 
img.css('top', -y+'px');