1 Replies - 13279 Views - Last Post: 03 August 2012 - 04:58 AM

#1 gemoney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 112
  • Joined: 30-October 09

image map coordinates different in with resolution

Posted 02 August 2012 - 09:08 AM

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*/
	width:170px;/* must be same as left margin on #middle*/
	left:-2px;/* push column into position*/
	display:inline;/* ie fix*/
	height:620px; /*500*/
	font-family:"PT Sans Narrow", sans-serif;
	margin-top: 0px;
	padding:10px 0 3px 3px;
	border-bottom:solid 1px #c0c0c0;
  	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;	
  	filter:alpha(opacity=90);  /*For IE8 and earlier */

	padding: 12px 10px 12px 12px;
	/*background: #ffffff;*/	

<div id="middle"> 
   			<div id="left"> 				
				<a href="#">Redevelopment Authority </br> Home Page</a>
				<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 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" />
				<!-- End ImageReady Slices -->
				<!-- Center end -->			
  		</div><!-- End Middle -->]

Posted Image

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

Is This A Good Question/Topic? 0
  • +

Replies To: image map coordinates different in with resolution

#2 Lazy Vulpes   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 91
  • Joined: 02-May 12

Re: image map coordinates different in with resolution

Posted 03 August 2012 - 04:58 AM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1