Image/ Image Map & Scaling

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

Not currently possible it seems... You can hack it with JS though - http://stackoverflow.com/questions/7...sive-image-map.

Another (better) solution would be to use child elements and positioning them absolutely within the container. Then use the child elements as anchors.

Use child elements and position it absolutely within the container. Then use the child elements as anchors.


http://www.csselite.com
http://www.cssdrive.com
http://www.css-website.com