Need a little help if possible as I have been stuck on this for ages.
Looking to make a header for a website that adjusts sae to fit the browser. I have made the image with selectable hotspots in Fireworks.
I can make the image resize fine, but the hotshots do not move with the image so they are not in the right place.
Any help sorting this would be amazing.
Here is the code
[code=html]
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<img usemap=”#m_z” id=”z” src=”http://stonehengecycles.web-epos.com/images/stonehengecycle/stonehenge.png” style=”width: 100%;” />
<map id=”m_z” name=”m_z”><area alt=”” href=”http://www.stonehengecycles.com/page/7/contact” coords=”1224,20,1412,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/7/contact” coords=”1039,141,1169,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/30/gallery” coords=”881,141,1002,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/22/Free_24_months” coords=”718,141,842,188″ shape=”rect” />
<area alt=”” target=”_blank” href=”http://www.stonehengecycles.com” coords=”246,140,358,187″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/8/About_UsCervelo_R3_Wilier_Bikes_Wilier_Road_Bikes” coords=”564,141,677,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/22/services” coords=”394,140,522,187″ shape=”rect” /> </map>
</body>
</html>