HOW TO MAKE
AN IMAGE MAP |
WHY AN IMAGE MAP?
If you'd like to use an image as a background, you can select various places on the image to use as clickable links to other pages. When viewers move their computer mouse over the image, it will indicate to them when they have found a link. MSNTV users will see the upper left link outlined in yellow, then will use the arrow keys to find the other links. An image map makes a good "front page" for a website.
DIRECTIONS:
SETTING THE COORDINANTS: Coordinates are measured using an "X" value and a "Y" value. The "X" starts measuring from the LEFT side and goes straight across to the right side. The "Y" starts at the TOP and measures straight down. Both "X" and "Y" start at the TOP LEFT corner: X=0, Y=0.
An "X" value of 50 means the UPPER LEFT corner is 50 pixels to the right of the left side of the image.
A "Y" value of 75 means the UPPER LEFT corner is also 75 pixels DOWN from the top of the image. If you look at a piece of graph paper, this will become clearer to you>
There are several online tools that will help you find the coordinates needed to make the image map. Image Magic is the easiest to use as you don't have to change screens each time you get a set of coordinates.
Please click on the following to read printable directions for
Image Magick
OR - you can take your image to this tool page: Poor Man's Image Mapper. Click on the image wherever you want the links to appear, and it will show you the coordinates. Remember to get the coordinates for the UPPER LEFT and LOWER RIGHT corners for EACH link.
CODING THE MAP: Now you're ready to make the page. Go to your file manager and set up the html codes for the page. The specific codes to make the image map go in the body of the page.
- First line of codes sets the url of the large image itself:
<img src="URL.jpg" width="???" height="???" usemap="#map1" /> <map
name="map1">
- Next, for each link, you need the following:
<area shape="rect" coords="215,51,229,72" href="URL_of_FIRST_LINK">
<area shape="rect" coords="413,28,426,48" href="URL_of_2ND_LINK"> </map>
NOTE THAT THERE IS ONE COMMA BETWEEN EACH NUMBER. DO NOT MAKE ANY SPACES BETWEEN THE NUMBERS.
The order of the numbers is always: "X-1,Y-1,X-2,Y-2" as explained above.
You can also put more than one image map on each page. Just name the 2nd map, usemap="#map2" - and the 3rd, usemap="#map3" and so on. Be sure to use the closing map tag for each image map, as in the example above.
The usemap name and the map name must be the same for each image map. Choose a different usemap and map name for the 2nd image map on the same page.
Here is a textarea so you can copy the codes above:
In the image map below, there are four links. See if you can find all of them.
Hint: one is in the sky, one is on each building, and the last is on a tombstone.
| |
