Question

I am using jCarousel to make a image slider of logos. In that the image should not be used as background it should be with in the image tag, thats the requirement. So placed all images with in li tag. and the jCarousel is working fine.

But here i have to show only half of the picture(sprite image [default,mouse over image]) by default and on the mouse over another part. In css how to set up image position to show only half of the picture and on the mouse over another half.

See the screenshot.

Thanks

Answer 1

First, make sure that your li elements are set to overflow: hidden.
Then, move your img’s to the left, outside of the li elements:

var neg_width_of_individual_img = -35; //may need to change this number!

$(document).ready(function(){
  $('#slideshow img').hover(
    function(){
      $(this).css('margin-left',neg_width_of_individual_img);
    },
    function () {
      $(this).css('margin-left',0);
    }
  );
});