| 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. An X 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. I use mainly My Imager. 1) After the tool page has loaded, click on "FILE" - the first button on the left - and then click "OPEN." When that page appears, enter the url of your image in the box below and click once. Wait for the image to fully load. 2) At the top of the page, click on "EDIT" (2nd from the left), then click on "CROP." You will see the image reload, now surrounded by the yellow line with an arrow at the bottom right. Click to activate. 3) First, decide where on your image you wish the links to be placed. Move the arrow to where you want the UPPER LEFT corner of the first link to be and click. You have now set the coordinates for that corner. But you won't see them yet. 4) When the new screen appears, move the arrow to where you want the LOWER RIGHT corner of your first link to be placed and click. 5) Now the next screen will show you the coordinates you have selected. Let's suppose they are as follows: X-1 215 Y-51 X-2 229 Y-72 Write them in the order they appear: "215,51,229,72" and make a note of which link this will be. DO NOT CLICK ON "CROP." 6) Hit your "back" key two times, slowly. Repeat this process until you have collected all the coordinates you'll need for each link on the map. Be careful NOT to overlap any of these areas. 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. 1) First line of codes sets the url of the large image itself: NOTE THAT THERE IS ONE COMMA BETWEEN EACH NUMBER. DO NOT MAKE ANY SPACES BETWEEN THE NUMBERS. The numbers are 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. Here is a textarea so you can copy the codes above: |