Wikidiagrams uses colour-coded images to mark up different regions in an image. The three examples on this page all have pairs of images, one to show, and one with colours corresponding to the different zones.
Example using zones - Hover over each person to see some words about them
The image above additionally allows you to view the colour-coded image for zones. Click on 'Hospot Zones' to see that. Using zones and the large information box:
Example using zones - Hover over items in the diagram to see more details
As for the photo of people, each diagram has two parts.
Example using zones - Spectrograms
An image with zones, used to explain a spectrogram for the sound of the word 'Audacity'. The diagram uses screenshots taken of Audacity.
Next: Slippy Maps