How do image map coordinates work

In other words, the top left corner always has coordinates 0,0. This is the optional target window or frame to open the linked URL in. This attribute allows you to give the area a title. When the mouse is rolled over this hot spot, the browser will usually pop up a tool tip displaying this title. As an alternative to defining the whole image map in HTML for the browser to read, you can use server-side image maps.

With this type of map, the browser simply sends the x,y coordinates of the point clicked on to a server-side script such as a CGI script. Then, when you click on the image, the browser sends the x,y coordinate of the point that you clicked on to the server-side script, which can then interpret these x,y values and take an appropriate action. The coordinates are appended as parameters to the end of the script URL:. For example, if you wanted the user to choose a country from a world map image, you could use the server-side script to calculate which country was clicked on, and then display information about that country.

Another way of creating a server-side image map is with the image input type in web forms:. In this case, the x,y coordinates are sent as form fields named fieldname. Try moving your mouse over the image below to see if this works:. You can then move the mouse over the image and see the mouse coordinates in the Info Palette. Hi, The tutorial on how to create an image map and find the coords are very simple and in-detail. Really nice one… Keep it up. I am workgin in dreamweaver and made an image map.

I am trying to do osmethign opposite. Is it good to do it that way or do put borders seperate and show teh content in a table cel. Basically it is not clear how to provide a hyperlink to a text and whow teh taget content on same page, wihtin an image map.

You need something other than an image map to do what you describe. An image map is only for defining different areas as links. You probably need to look at learning some javascript and using that to replace areas within the page e. An image map is an image with clickable areas. The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

The only difference from other images is that you must add a usemap attribute:. The usemap value starts with a hash tag followed by the name of the image map, and is used to create a relationship between the image and the image map. You must also define some coordinates to be able to place the clickable area onto the image.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:. We need to create two shapes to overlay over the image: a polygon shape over the screen of the phone, and a second polygon that approximately covers the Scrabble letters.

Using an application like Microsoft Paint with the rulers visible, we can see that the four corners of the phone screen fall at the following pixel coordinates:. We can create that shape, or area , in an HTML map by using the following code:.

Using the same process described above, we can also create the shape over the letters by using the following code:. Notice that since the shape over the Scrabble images has five corners there are five sets of dimensions in the code.

For example, in addition to poly , you can also use rect and circle to define shapes. Learn more about using image maps by visiting the map documentation page. W3Schools is a great resource. For example, I could use an image map to create the illusion of buttons on this graphic:.

Image maps allow one graphic to serve double or triple duty and link to more than one webpage. Image maps are best used in HTML emails because not all email clients support more advanced methods.

There are certainly simpler techniques to achieve the same effect on your website. An image map is made up of several parts: a map name, area shapes, coordinates, URLs and the image or graphic the map is defining. For the graphic above, the image map would look like this:.

You will also need to add the name attribute in your opening map tag. Next you will include an area tag for each hotspot you are defining. Sorry, Pluto. In my example, I am only linking two parts of the graphic the two read buttons to two different URLs, so I only need two area tags.