Impressed with Jquery UI image manipulation

We are using JQuery UI for our current project. I am particularly impressed with their image manipulation using CSS. I am talking about the Framework Icons which is one image ( 5  Kb) but it can be manipulated in such a way that the coordinates are changed to just bring a particular image portion up front. They are using a pretty effective technique using the background-position. I have heard of this technique before but was really excited to see that in action. Let me give you an example:  If you want to use the delete image (trash can) then you can use the following class:

“ui-icon ui-icon-trash” (CSS : .ui-icon-trash { background-position: -176px -96px; }).

so just mouseover the framework icon in the link above, get the class name and use it. The required image would appear. Pretty sweet.

Hope this helps.

Happy Programming!!!



1 Response to “Impressed with Jquery UI image manipulation”

  1. 1 mobile application development July 29, 2013 at 10:49 pm

    It’s hard to find experienced people in this particular subject, but you seem like you know what you’re talking about!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: