An easy trick that you can do is break up your image into multiple images and then supply each image's Alt attribute with the necessary data on each city. By supplying an Alt attribute, the browser will automatically show the value of this attribute when your mouse hovers over it.
Breaking up an image - Any graphics person should be able to break up an image into smaller images - for example 1 single rectangular image can be broken down into a matrix of 2 X 2 smaller images or whatever combination.
Let say the original image has height/width 600 x 600 pixels. After breaking into 2x2 matrix, you now have smaller images which are 300 x 300 pixels. You can now then place the smaller ones into a single table cell with the original 600 width and height.<Table><td width="600" height="600"> (your images)</td> and both images will appear next to each other.
Also make sure your table has settings:
border="0" cellspacing="0" cellpadding="0" so no gaps appear between images..
Hope this helps..