You have the right idea Rolleo but your example wouldnt work.
What they do is just subtract space from your fill design from right to left. There isnt any movement.
the best way ive found to get non standard movement is to use multiple bars
cheapo ex
----- is negative space ( 0 alpha)
x is your fill image
... used as a spacer cause it eats my whitespace
make 4 hp bars
---------x
------x---
---x------
x---------
then line them up like this
.---------x
....-------x---
.........---x------
.............x---------
voila ghetto top to bottom gauge
each section will still fill left to right but it will also appear to fill top to bottom
edit: my fav way to get negative space on my images is to tell the xml that my image is larger than it really is, because it sets the fill graphic's size to whatever you tell it the images size is
e.g. you want your "x" fill image to show up as the 14-0% of the gauge only
say your image is really located at x3 y3 and its size is 3x 3y...
you tell the xml that it starts at x3 y3 and is 21x 3y in size
the gauge will fill as if the image is 21long and only show your image being cut off when it gets to the very end of the gauge.
if you want the image to be at the right side of the gauge and show 100-86% locate your image at x21 y3 and tell it that it starts at x3 y3 and is x21 y3 in size
the only catch is you need to keep the overlapping coordinates that you used blank and 0 alpha in your tga so that you dont get an unrelated image showing up in your gauge.
I am lazy and wasteful so i make a new tga for each graphic i use, so this isnt a problem for me :/
hope this helps...