An image map is a graphic that has more than one hyperlink attached to it. They hyperlink that the viewer will follow when clicking on the image depends on which part of they click on.
To create an image map for a graphic, open it up in PhotoShop, PaintShopPro , or any other rastor based program, and set your rulers to pixels. Next, you will need to determine how you want your “hot” areas to be shaped. Hot areas can be shaped in any fashion, but they are catigorized into these three types:
| Rectangles: x,y,x,y | Using the x,y coordinates of the top left and bottom right corners of the area you want to be designated as a hot area. |
| Circles: x,y,r | Using the x,y coordinate of the centerpoint and the radius in pixel measurement of the area you want to be designated as a hot area. |
| Polygons: x,y,x,y,x,y, (etc) | Using the x,y coordinates of each point of the polygon, working around the area in the same direction (clockwise, or counter-clockwise) without crisscrossing over your pathway. |
We are going to place an image map bar at the bottom of each of the pages in our practice website. It will be a very simplistic one, but it will show you how to find the coordinates you will need for each type of categories of coding listed above for imagemaps. The principles are the same, it is just a matter of the more complicated of an image you have, the more coordinates you have to write down.
Open up the image named atsmap.gif in Photoshop or PaintShopPro. This is a very simple image to convert into an image map and could be done with just either three circular or three rectangular hot area, but for the purpose of showing you to do each type of hot area, we will do one of each of the three types.
For the house, we are going to use a rectangle to make the hot area. You do not actually draw anything to make the shape of your hot area, you just use your selection tools and the info pallet to show you what the coordiantes are for where your points are that shape the area. Zoom in on the house so that you can get a better view, and show your info pallet. Click on one of your selection tools so that you can see your x and y coordinates in the info pallet change as you move around. pick a point in the upper left hand corner of the house image and write down the coordinate. It should be somewhere close to 14,4 (x,y). Now move down to the bottom right corner of the house and pick another point close to 124,84 (x,y). All of the area in between these two points will now be the hot area for the house.
For the photo image that will be the link to the About Us page, you will use a circular area. Find a point close to the center of the image and then move out to the edge and determine how many pixels there are between the two. The center of the image should be 203,44 and the outer edge in all directions is about 40 pixels.
You will use a polygon for the form image. Polygons are not hard to determine Ð they just take more time. Start out at the top left corner of the “page” which should be at 326,8, then move down to the top right corner of the “page” to 371,23. Now you will move down along the side of the image and all the way around until you get back to the beginning again, tracing the outside of the image. The actual coordinates we will use for this image map are listed below in the code for you.
| <CENTER> <MAP NAME=”atsmap”> <AREA SHAPE=”rect” COORDS=”14,4,124,84″ HREF=”home.html” TARGET=”main”> <AREA SHAPE=”circle” COORDS=”203,44,40″ HREF=”aboutus.html” TARGET=”main”> <AREA SHAPE=”polygon” COORDS=”326,8,371,23,368,50,360,70,342,80,326,80,295,71,281,56,302,60,310, 58,324,40″ HREF=”orderform.html” TARGET=”_parent”> </MAP><IMG SRC=”atsmap.gif” WIDTH=391 HEIGHT=90 USEMAP=”#atsmap” BORDER=”0″> </CENTER> |
The first part of the code with all of the coordinates defines the imagemap, and the second part of the code calls up the graphic that it uses and puts it on the page.
Paste the image map code at the bottom of each of your three pages. When you place it at the bottom of the order form page, remember to take out the “back to homepage” button that is there now.
When you view your pages again in the browser, you will notice that after you have done to your order form page, your image map links load the home and about us pages into a new window again. This is because you are already in a parent frame situation, and therfore the code telling it to load the new page into the main frame confuses the browser. You want to have the two frame structure loaded again when you to back to your other pages from the order form page. What you need to do now is to go back to your HTML files for your order form page and change the code so that the hyperlink for the home image is for your original index.html file again, and the link for the about us image is for a new index file that you will create and name as index2.html.
Your new image map code for your orderform.html file should read as:
| <CENTER> <MAP NAME=”atsmap”> <AREA SHAPE=”rect” COORDS=”14,4,124,84″ HREF=”index.html”> <AREA SHAPE=”circle” COORDS=”203,44,40″ HREF=”index2.html”> <AREA SHAPE=”polygon” COORDS=”326,8,371,23,368,50,360,70,342,80,326,80,295,71,281,56,302,60,310, 58,324,40″ HREF=”orderform.html” TARGET=”_parent”> </MAP><IMG SRC=”atsmap.gif” WIDTH=391 HEIGHT=90 USEMAP=”#atsmap” BORDER=”0″> </CENTER> |
Make a copy of your index.html file and name is as index2.html. After that, change the file that the second frame is linked to so that it will open up your order form page instead of your home page as shown below.
| <HTML> <HEAD> <TITLE>Adventure Travel Service</TITLE> </HEAD><FRAMESET COLS=”118,*” FRAMEBORDER=0 BORDER=0 NORESIZE FRAMESPACING=”0″> <FRAMESET ROWS=”100%,*”> <FRAME NAME=”buttons” SRC=”buttons.html” SCROLLING=”no” MARGINWIDTH=”7″ MARGINHEIGHT=”10″> </FRAMESET> <FRAMESET ROWS=”100%”> <FRAME NAME=”main” SRC=”aboutus.html” MARGINWIDTH=”5″ MARGINHEIGHT=”10″> </FRAMESET> </FRAMESET> <BASE TARGET=”_top”> </HTML> |
Now you can view your pages again and see how your website navigates.