We help IT Professionals succeed at work.

How to identify the particular icon in that master Icon image

Hi,
I have attached the master image. This image have some icons. How to identify the particular icon position.
For reference:.IconFAQLightGray
{
      width:23px;
      height:23px;
      background-image:url(Images/Icon.gif);
      background-position:0px -184px;
      background-repeat:no-repeat;
      cursor:pointer;
      border:none 0px black;
}
.IconTick
{
    float:left;
    width:38px;
    height:23px;
    margin-top:5px;
    background-image:url(Images/Icon.gif);
    background-position:15px -23px;
    background-repeat:no-repeat;
    border:0px none black;
}
.IconCalendar
{
    width:23px;
    height:18px;
    background-image:url(Images/Icon.gif);
    background-position:0px -50px;
    background-repeat:no-repeat;
      cursor:pointer;
    border:0px none black;
}
In the future will add some more added icons into existing master image but how to identify the the position like horizontal(x-position) and vertical(y-position) in that image. Is any tool for easily identifying the position(x&y positions)?
Icon.gif
Comment
Watch Question

CERTIFIED EXPERT

Commented:
For getting particular image from big single image, you have to use "background-position" attribute exactly in the same way in which you are currently using. (and better way in css only)

Check this for more information on this property:

http://www.w3schools.com/cssref/pr_background-position.asp

this is called as "CSS Sprites".

Have a look over this -

http://css-tricks.com/158-css-sprites/

Hope this helps you.


Top Expert 2011

Commented:
You should be able to open the image in MSPaint (or similar) and "draw a box" around the portion that you want to use and the program will tell you the top-left x,y of your box and also give you your height and width.  I don't know if this is any easier than how you have been doing it, but the information is readily available.

Comment on your master icon image... If you read through the comments on the article mroonal linked, several posters recommend (and I agree) that you should leave some extra white space between the icons to allow for some "wiggle room" as users adjust font-size in their browsers so that the adjacent images don't bleed through.

Author

Commented:
I am not get full information or solution. I want some more easier way. Is any tool for find the position of x and y of image?
CERTIFIED EXPERT

Commented:
If you want to find X and Y co ordinates within image where you clicked...
here is nice example:

http://www.chestysoft.com/imagefile/javascript/get-coordinates.asp
Top Expert 2011

Commented:
So you are looking for a tool that will take an image you provide and give you coordinates for all the little-images inside it?
Use Photoshop or GIMP and use the selection tool, quite literally all you have to do is click-hold-drag from the top left corner of the image to the top left corner of the image you want to display.

If you make a proper sprite out of those images and space them all on a 10px grid then all of your images will be really easy to reference, they'll all start at a multiple of 10.

e.g. in your image, it's 23px wide and every image on it is 23px tall.  Therefore, all of your images will have a background position of: 0px XXpx.

Where XXpx is 0 for the top most image, 23, for the second image down, 46 for the third image down, etc.

If you add another column to make it two icons wide (46px wide) then to reference those icons your first number will always be 23px (which says, move this background image 23 px to the left so the first column is hidden), then you'll do the same 0 for the top most image, 23 for the second image, and so on.

If you make a really big sprite, like Amazon uses, then you'll have to calculate your left and top values, but as said earlier, that's done by keeping your images in a grid to make them even numbers (makes it easier to code precisely) and then just use the selection tool to select from the top left of the canvas to the top left of the start of your image.  The dimensions of your selection will give you the first number (width) and the second number (height).

Author

Commented:
I though that is correct way, so I picked accepted others. Please close this issue. No need for discussion

Author

Commented:
I found the solution.  please close this issue.  Please remove my other questions from my account because some confidential data(Screenshot) added into questions.

So,Please immediately remove or hide from public.

Best Regards,
Sunil

Explore More ContentExplore courses, solutions, and other research materials related to this topic.