Clarity

Just wondering that after all the images were put into one file is it possible to display them individually and directly?

Like if I look at the source it is something like this

<img id="d662242e1225" src="ui/uitk/images/s.gif" name="FlagFollowup" alt="Yellow Flag" title="Yellow Flag" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -511px -0px" align="absmiddle" border="0"></a>

for the yellow flag.

I did not put that in an html portlet, but tried to use what is displayed for the image location as part of the url.

No luck this far that way.

Read up on image sprites, you can use this to display parts of the image by adjusting the width/height.

In the case of the code you posted, this is valid.

Change the -511px to -959px and you get a key

Or you can go the  "webroot\ui\evolution2\images" route...