Coordinates for image map?

Get Started
1

I created an image map in Dreamweaver using the polygon Hotspot tool.

But when i open the html file in my browser, it gets displaced. I mean the coordinates selected while i was creating the image map shift a bit to the top and the left and the image is’nt clickable where i exactly wanted it to be.

Has it got to do anything with the size of the monitor i am viewing the site on?

2

It shouldn’t really make any difference to the co-ordinates whether or not your monitor is large or small; 0,0,0,0 will be still be that regardless though possibly something else is in play on the page itself.

I will assume the image hasn’t been stretched or resized with any height and width attributes in the CSS or markup on the page?

3

yes i have stretched the image so that it could stretch to the entire height and width of the browser.

The code i’ve used is:
I have not inserted the imape map code into this right now…just wanted to show how i stretched the image…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>MetaMore</title>

<style type="text/css">

/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */

html, body {height:100%; margin:0; padding:0;}

/* Set the position and dimensions of the background image. */

#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */

#content {position:relative; z-index:1;padding:10px;}

</style>

<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->

<!--[if IE 6]>

<style type="text/css">

html {overflow-y:hidden;}

body {overflow-y:auto;}

#page-background {position:absolute; z-index:-1;}

#content {position:static;padding:10px;}

</style>

<![endif]-->

</head>

<body>

	<div id="page-background"><img src="metamore webpage.JPG" width="100%" height="100%" border="0" >

</div>

	<div id="content">

	

	</div>

</body>

</html>
4

That is your problem you have to keep the image the original size you cannot really stretch it from where you put the original coordinates (especially if using percentages) those hotspots are static so changing the image dimensions afterwards would be folly.

5

So you mean to say that this cannot be done?

I mean different monitors will have different height and different width. And since the image is stretched to 100% height and width, the coordinates for the hotspot would be different on different monitors.

Even if i readjust the coordinates to suit the new height and width on my monitor, if another person on another monitors views it, for him the coordinates will change and therefore the position of the hotspot.

Any other alternative you can suggest?

6

Theoretically you can use % on the AREA but I believe most major browser will understand percentage coordinates incorrectly (interpreting percentage coordinates instead as pixel coordinates).

So that’s probably a dead-end, i.e. instead of 100% it would be rendered 100px (hotspot) and so on… Maybe JavaScript might help but that’s not my strong point.

7

okay. thanks mate. :slight_smile: