Hi All,


Got a bit of a problem

On my website i have a image - original size (width -"4445" height - "2098"). On this image i have a image map with 5 areas on it.
The problem i am having is how do i scale this map down, when the browser scales the image down.

The image is resized depending on the browser size, and i use this css code to do so.

Code:
.imgresize{
    width: 100%; /* you can use % */
    height: auto;

Code:
<img src="core_pics/main-view.jpg" width="4445" height="2098" class="imgresize" alt="Main Pic" usemap="#image_map" border="0" id="mainpic">
<map name="image_map" id="image_map" class="imgresize">
	<area shape="poly" data-key="1" coords=" 626,1136, 627,1212, 870,1219, 858,1138, 629,1137" href="#" alt="red hotspot"/>
	<area shape="poly" data-key="2" coords=" 624,1243, 630,1332, 1041,1335, 1033,1236, 622,1246" href="#" alt="green hotspot"/>
	<area shape="poly" data-key="3" coords=" 622,1356, 626,1444, 1465,1442, 1450,1351, 606,1357" href="#" alt="purple hotspot"/>
	<area shape="poly" data-key="4" coords=" 620,1467, 629,1555, 1752,1550, 1737,1458, 617,1467" href="#" alt="yellow hotspot"/>
	<area shape="poly" data-key="5" coords=" 2403,1132, 2444,1150, 2490,1182, 2525,1222, 2553,1280, 2563,1355, 2513,1485, 2482,1517, 2451,1537, 2403,1557, 2331,1564, 2253,1550, 2183,1505, 2140,1450, 2118,1366, 2120,1304, 2142,1245, 2171,1201, 2211,1168, 2241,1149, 2278,1132, 2399,1132" href="#" alt="olive hotspot"/>

So how do i scale the imagemap down when the browser scales the image down,

Thanks in advance

Alex