asked on

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

Mrunal

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.

nap0leon

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.

sunilpasupunuri

ASKER

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?

Mrunal

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

nap0leon

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?

ASKER CERTIFIED SOLUTION

DanielleFavreau

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sunilpasupunuri

ASKER

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

sunilpasupunuri

ASKER

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