CODEWITHSUNDEEP
jqueryhtmljquery-animate
mchart
mchart

Reputation: 108

How to display part of an image using jquery?

I'm using jquery and I'm trying to display part of an image, say a square in the middle of it, then using animate, roll out the rest of it.

I'm thinking something involving divs, with overflow: hidden, but I can't figure it out.

Many thanks.

Upvotes: 3

Views: 5808

Answers (4)

Chad
Chad

Reputation: 1404

You could setup something similar to a css sprite map where you use css to display a specific part of the image. Then use jquery to change the css class to something that displays the whole image.

Here's a link about css sprite maps. http://css-tricks.com/css-sprites/

Upvotes: 1

andres descalzo
andres descalzo

Reputation: 14967

you have to work with css: position to put a div over another div css position

Upvotes: 0

Zed
Zed

Reputation: 57668

Check out imgAreaSelect plugin, it does that exactly.

Upvotes: 3

Tom Ritter
Tom Ritter

Reputation: 101400

To display the square initially, you would use a technique called image spriting and there are many ways to actually accomplish it with CSS. Here's one by alistapart. After that, you could use animate to alter the css manually.

However, I bet there's a jquery plugin that does something like this automgaically...

Upvotes: 1

Related Questions