How to get the perticluar image from large set images in one image using css

How to get the perticluar image from large set images in one image using css

e.g. 开发者_如何学编程Jquery ui icons having one large image but using css class it retrives only perticlar image icon.

---

Firstly, you create approporiate viewport div:

<div class="ui-icon alert-icon"></div>

Then you define CSS:

.ui-icon { width:16px; height:16px; overflow:hidden; background:url(images/icons.png); }
.alert-icon { background-position:0 0; }
.warrning-icon { background-position:0 -16px; }

Note - our ui-icon class applies default values for every icon. Classes alert-icon and warrning-icon are example of customized icons. They are just moving background image showing correct piece of the icons.png image.

Depending on the layout of the icons in your main, sprite image, you will have to move the image by more/less pixels or in different direction (+/-).

---

You can assign them the same class, or you can get them by tag name .. get an array of images.. class it retrieves only perticular image icon what you mean here is ID, only one ID is allowed per document but you can use class on multiple elements, hence retrieving them with the class selector.

EDIT

e.g. Jquery ui icons having one large image but using css class it retrives only perticlar image icon.

What you probably meant was, that you are using image sprites?so you want to get only portion of that big image(like jquery ui), the thing you need to do is you need background position . Google image sprites I'm sure you'll find plenty of resources, that is how I got around it

---

Make your div with standard size and then apply like this:

<style>#jd {
display:block;
overflow:hidden;
background-image:url(1.png);
background-repeat:no-repeat;
height:100px;
width:100px;}.j1 { background-position: 0px 0px;}.j2 {background-position: 0px -99px;}</style><div id="jd" class="j1"></div><hr><div id="jd"  class="j2"></div>