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!!!

Cheers,

Raja

Advertisements

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!

    Thanks


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s





%d bloggers like this: