Creating one tiled image from multiple images

Shovel

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,350
OK, at work we have a system that shows an image to highlight regions of a map. If you click a different region then the image is swapped for another one with the appropraite region highlighted.

Rather than use a large number of individual images (some maps have upwards of 50) I will write a script that interprets the region you've clicked and dynamically clip a single image contain all the regions, making it look as if the image has changed, when really it's just moved.

This technique can be implemented quite easily in XHTML, CSS and JavaScript (that side is in the bag), but the problem I have is converting the hundreds of individual images (we have maps of about a dozen countries) into a single image each.

I need an application (or, I guess, really complicated Photoshop action) which will take an ordered list of the highlighted image files and put them into a single image. All the input images are of the same dimensions. I also want to specify that the resulting image should have five 'columns' of images, with an infitinite number of 'rows' (reading left to right), or something to that effect, since the JavaScript part depends on knowing.

The reason for this hassle? On a 9 region map, the image is 27kb smaller than with individual images. The saving on a large map (with 30, 50 regions) should be huge. This site gets 100,000 hits a month. That size saving == money. ;)
-- it also means I can do away with "image preload" JavaScript which is pretty ugly.

Thanks for any help,

Ben
 

Users who are viewing this thread

Top Bottom