[gemoney]

I am creating a website and I got the coordinates for the image working with the resolution my screen resolution 1366x768, but when I change the resolution to 1024x768, all the coordinates are off the clickable areas. I made it position:relative without success. I appreciate some help.
Thank you.

#left {
	margin-left:-169px;/* must be 1 pixel less than width*/
	float:left;
	width:170px;/* must be same as left margin on #middle*/
	position:relative;
	background:#CBD9EB;
	left:-2px;/* push column into position*/
	display:inline;/* ie fix*/
	overflow:auto;
	height:620px; /*500*/
	text-align:center;	
	font-family:"PT Sans Narrow", sans-serif;
	font-weight:normal;
	font-size:13pt;
	margin-top: 0px;
	line-height:25px;
	background:#CBD9EB;
	padding:10px 0 3px 3px;
	color:#474747;
	border-bottom:solid 1px #c0c0c0;
	opacity:0.9;
  	filter:alpha(opacity=90);  /*For IE8 and earlier */
}

* html #left{margin-right:-3px;}/* 3 pixel jog*/

#middle {
	/*border-left:1px solid #c0c0c0;
	border-right:1px solid #c0c0c0;
	border-top: solid 1px #c0c0c0;*/
	border-bottom: solid 1px #c0c0c0;	
	background:#CBD9EB;
	height:633px;
	margin-left:170px;
	/*margin-right:170px;*/
	opacity:0.9;
  	filter:alpha(opacity=90);  /*For IE8 and earlier */
}

#centre{
	position:relative;
	padding: 12px 10px 12px 12px;
	/*background: #ffffff;*/	
}

html

<div id="middle"> 
   			<div id="left"> 				
				<a href="#">Redevelopment Authority </br> Home Page</a>
				<h4><b>Destinations</b></h4>
				<a href="Arnold.html">Arnold</a></br>
				<a href="Derry.html">Derry</a></br>						
				<a href="Greensburg.html">Greensburg</a></br>
				<a href="Irwin.html">Irwin</a></br>
				<a href="Jeannette.html">Jeannette</a></br>
				<a href="Latrobe.html">Latrobe</a></br>
				<a href="LowerBurrell.html">Lower Burrell</a></br>
				<a href="Monessen.html">Monessen</a></br>
				<a href="MountPleasant.html">Mount Pleasant</a></br>
				<a href="NewKensington.html">New Kensington</a></br>
				<a href="Scottdale.html">Scottdale</a></br>
				<a href="Trafford.html">Trafford</a></br>
				<a href="Vandergrift.html">Vandergrift</a></br>
				<a href="WestNewton.html">West Newton</a></br>
				<a href="WestOverton.html">West Overton</a></br></br>
				
				<a href="#">Westmoreland	County </br> Home Page</a>
				<!-- Column end -->							      			
    		</div>
    		<div id="centre"> 
      			<!-- Center start -->
      			<!-- ImageReady Slices (Basemap.png) -->
				<img src="img/Basemap.png" alt ="Basemap" width='100%' height='610' positive='relative' usemap="#MapCoordinates" />
				
				<MAP NAME="MapCoordinates">		
				  <area shape="rect" coords="181,98,254,119" href="Arnold.html" alt="Arnold" />
				  <area shape="rect" coords="119,124,246,144" href="NewKensington.html" alt="NewKensington" />
				  <area shape="rect" coords="307,98,406,122" href="Vandergrift.html" alt="Vandergrift" />
				  <area shape="rect" coords="250,136,370,157" href="LowerBurrell.html" alt="LowerBurrell" />
				  <area shape="rect" coords="182,271,261,288" href="Trafford.html" alt="Trafford" />
				  <area shape="rect" coords="217,318,281,337" href="Irwin.html" alt="Irwin" />
				  <area shape="rect" coords="294,311,363,332" href="Jeannette.html" alt="Jeannette" />
				  <area shape="rect" coords="517,302,569,323" href="Derry.html" alt="Derry" />
				  <area shape="rect" coords="436,320,503,340" href="Latrobe.html" alt="Latrobe" />
				  <area shape="rect" coords="330,337,429,356" href="Greensburg.html" alt="Greensburg" />
                  <area shape="rect" coords="157,402,266,424" href="WestNewton.html" alt="WestNewton" />
                  <area shape="rect" coords="336,452,430,470" href="MtPleasant.html" alt="MtPleasant" />
                  <area shape="rect" coords="88,455,172,475" href="Monessen.html" alt="Monessen" />
                  <area shape="rect" coords="302,496,373,514" href="Scottdale.html" alt="Scottdale" />
                </MAP>				
				<!-- End ImageReady Slices -->
				<!-- Center end -->			
    		</div>    		
  		</div><!-- End Middle -->]

This post has been edited by Atli: 02 August 2012 - 09:10 AM
Reason for edit:: Fixed the [code] tags.

[Lazy Vulpes]

You're setting your image width to 100%. That is not 100% of the image size but 100% of #center. So on smaller screen resolution your image will be distorted and the map areas will look as if out of place. You ether need to have #center have a fixed width or simply remove width='100%' from the image.

Btw, I don't think there's a img attribute that's called positive.