First I tried making a simple HTML table, with each square holding the image reference code copied straight from flickr. Unfortunately I couldn't make it work: The “small” image size was too big, and the “thumbnail” size was too small, and it somehow just didn't look… professional enough. I decided I wanted to fill each square with as much of the image as would fit—and of course I wanted to be able to choose which part of the image would show. But how could I do that?
I needed to make my own image map. (Because the alternative was messing around with who-knows-what HTML tag attributes…)
A quick google search (how did we ever survive without google?) turned up this useful tutorial, based on Gimp which I already use for image editing, so it wasn't too hard to follow. The image map tool was very easy to use and seems to have worked just right. You can see the beautiful result here.
This work by Ian Bailey-Mortimer is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.Permissions beyond the scope of this license may be available by request.
