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

Example:

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

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

Example:

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

• javascript
• jquery
• image

• 5 you'll have to elaborate the question. – yoda Commented Jul 24, 2011 at 17:45
• 11 You can do that using CSS. – ThiefMaster Commented Jul 24, 2011 at 17:45
• Agree to ThiefMaster, create a DIV with specified width and height and set image as background image with given background-position in CSS – rabudde Commented Jul 24, 2011 at 17:46

3 Answers 3

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/

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

Ivan's example works if you add style overflow:hidden to the div like so..

<div style="width: 100px; height: 50px; position: relative; overflow: hidden;"> 
  <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>