I should point out that although the above methods (including those on the wiki) do reduce hotlinking, they will not outright prevent it.
The problem with pretty much all widely-usable anti-hotlinking code is that it relies upon the http referrer being passed. Just take a look at your own examples to see what I mean -- without that header they simply cannot function.
Now, where the issue lies is with referrers not being a mandatory part of the web browsing experience. That is, users can very easily disable it if they choose to do so (in the case of Firefox). In addition, certain firewalls such as Norton's block all referrals by default, meaning that they too will not be affected by your blocking.
This results in two things:
1) If you only let people view your images from a certain referral (eg: your own site), you will find that those not passing referrals will not be able to see your images. Since this accounts for quite a lot of people, it is not a good idea for any website which hopes to attract a decently sized crowd.
2) If you only block all referrals except your own and no referral at all (that is, the images will only show if there is either no referral -- the image is being directly accessed -- or it's being accessed from your own domain), you will only be preventing a percentage from hotlinking.
So, bearing that in mind, I personally am not aware of a bulletproof way of blocking hotlinking to images without compromising your ability to use them yourself. Perhaps using PHPto dynamically generate the URLs and make your site automatically change its URLs in unison would work, but that's far above me.