Question

How can I show a part of the image using jQuery or another JavaScript technique?

Example:

image:
[                ]
[     --------   ]
[     -      -   ]
[     - part -   ]
[     -      -   ]
[     --------   ]
[                ]

Answer 1

Manipulate the CSS property background, like this:

#imgDiv {
    background-image: url(image.jpg);
    background-position: 10px 50px; /* Visible coordinates in image */
    height: 200px; /* Visible height */
    width: 200px; /* Visible width */
}

Here’s how to .animate the visible part: http://jsfiddle.net/wGpk9/2/