How do you handle / manipulate split images

We have a requirement to display short / bigger size images. (e.g. I could have the front portion of the bus, back portion of the bus and middle portion of the bus as separate images).

So to demonstrate the above, I could try

front,middle,middle,back (to construct shorter image)
front,middle,middle,middle,middle,back (to construct bigger image)

Are there any sit开发者_JS百科es which let you download such images (i.e. they are already split) OR what would be an easier way to achieve this from an already available image.

You can use ImageMagick. Check the following example.

In your case if you want to split image only horizontally in (let's assume) 200px slices:

convert -crop 200 +repage verybig.jpg slice%02d.jpg

You could slice and dice an existing image with HTML/CSS, by setting up several adjacent elements with the same image as a background, then manipulating the widths and background position to get the desired effect.

Here's an example: http://jsfiddle.net/gjJcM/

You'd need to know something about the image content you're working with to make this seamless - I'd need more context to think in further detail.

HTH

The slicing and dicing can also be done with the Gimp.

Check out the Gimp's Filters->Map->Make-Seamless. It's used to make tiles join up seamlessly both horizontally and vertically. You can use it to make a horizontally repeatable tile by adding extra background above and below, and then after use cropping away the excess.

A more sophisticated tool for making the seamless join is panotools.

Combining the pieces at the end is easiest if you include half of the middle of the bus with the back and half of the middle with the front. You won't get a bus with no middle, but from the question, that's not something you needed.