Hi Chi,
As a front-end web developer I have done a lot of experimenting with this technique of image optimization. It makes a VERY big difference in performance of websites. I've seen sites where more than 50% of their HTTP requests were due to image load. If you have a highly tracked website, this method will do wonders for your servers CPU.
"The more round trip server requests you require in your pages, the longer and more indeterminate your load time becomes."
-
http://www.websiteoptimization.com/speed/tweak/combine/
Like I mentioned before, I'm not sure about this particular circumstance, because dokuwiki keeps it's CSS in a PHP file, so I'm not sure exactly how that works as far as what CSS every page load actually receives, however...If it were to use a regular CSS file, with the CSS I posted in the first post, using the image mapping method would improve the load times, tremendously.
(In a CSS file, any images you have in the CSS get loaded even if they aren't being used on the page)
As far as resizing the browser window, it has NO difference no matter the resolution, or browser, this method works perfectly all around. Here is an example page:
http://www.artician.com/learn/docs.php/wiki/play
On the above page I even threw them in a list item, no matter what the positioning, or use of the link is, the CSS will work ;)
Here's my wiki code, since this is a private wiki.
* {{/filemap.php}}
* {{/filemap.tgz}}
* {{/filemap.tar}}
* {{/filemap.gz}}
* {{/filemap.zip}}
* {{/filemap.rar}}
* {{/filemap.pdf}}
* {{/filemap.ps}}
* {{/filemap.doc}}
* {{/filemap.xls}}
* {{/filemap.ppt}}
* {{/filemap.rtf}}
* {{/filemap.rpm}}
* {{/filemap.deb}}
* {{/filemap.sxw}}
* {{/filemap.sxc}}
* {{/filemap.sxi}}
* {{/filemap.sxd}}
* {{/filemap.odc}}
* {{/filemap.odf}}
* {{/filemap.odg}}
* {{/filemap.odi}}
* {{/filemap.odp}}
* {{/filemap.ods}}
* {{/filemap.odt}}