Interactive Map: Image Sectors

[chiprivers]

I am not sure of what aspect of programming is best used for achieving my objective so I will start by posting this question here. Mods, please feel free to reposition this thread if you feel appropriate.

 

I want to produce an interactive map upon which there will be a number of elements that can be repositioned on the map, and depending on the positions where they are put, various aspects of the map will change.

 

I intend to have a <div> that contains this whole map which will have a background image which will display the map outline.  I will use several smaller <div>s as interative elements on the map which will moveable.  I will use jquery's draggable feature to enable this.  So far so good.

 

The bit I am unsure on how to do is how to produce some irregular shaped polygon sectors on the map which I can manipulate.  What I need to do is divide the map up in to a number of sectors.  I then need to be able to control the appearance of these sectors using CSS as if they were an element.  For example, if one of the draggable elements is repositioned within one of these sectors, I need to be able to run a function in jquery that will change the background colour of the sector.

 

Is there a way of creating an irregular shaped div?  Please let me know if I need to explain this further.

[Lautarox]

I don't think creating an irregular shaped div will be possible, you could use Canvas to draw what you want into the browser https://developer.mozilla.org/en/drawing_graphics_with_canvas but I don't think you'll get a full suppor by all browsers. You could also use the google map's api.