join seperate image into single one on web

Question

I am doing a temperature geographic online chart, and I have some problems when I try to display the color of each region on the map. For example, if some region has temperature higher than 40, it will display with the Red color on the map, or if the temperature lower than ZERO, it will display with Gray color on the map. Currently, I use transparent image nested in a div, and using margin and position css to connect them together to create the total map. If I want to display it with red color, I use the image in Red folder. My problem is that in the website, it display many divs, each one for each region. I want to join them into a single image to increase performance how can I do that? I am using MVC4

Many thanks for suggestion

Answer 1

I would suggest you use VectorMaps instead of image manipulation. Here are few links which you might take a look

http://jqvmap.com/

http://jvectormap.com/tutorials/getting-started/

Let us know if this helps.