Show part of an image

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/

Answer 2

You can use a div with fixed size and place the image absolutely positioned inside. You can then use javascript to change the top / left / right / bottom position of the image to move it.

<div style="width: 100px; height: 50px; position: relative"> 
  <img src="path" alt="something" id="image"  
      style="position: absolute; top: 0px; left: 0px" />
</div>

...
<script type="text/javascript">
function moveImage() {
   document.getElementById('image').style.top = '-100px';
}
</script>

EDIT: that's if you want to move the image over time... Otherwise simply use CSS