Gamespy	Hotmail
Google	School Home Page

On this site I will be explaining how to make an Image Map. An Image Map is a picture with links inside the picture. To create an image map first you need a picture. The picture I used was called cube.gif so what I am going to be using in my demonstration. Also you need any version of Paint Shop or a program that will show the grid coordinates of a picture (lets assume that you are using paint shop). Ok now that we have the tools lets get started. First you need to open you picture in paint shop and have some paper and a pen or pencil ready. Now use the "Selection tool" (make sure it's the one that selects stuff as a box) and select a spot on the picture that you wish to link. This is where the pen and paper come in handy, as you are selecting the area you want numbers like 68,68,0,0 will appear in the bottom left side of you Paint Shop window, write those numbers down. Now do this for all the areas on the picture you want to be a link. Here is an example of how the coordinates should look when you are done:

• 0,0,68,69 - Gamespy
• 61,70,0,141 - Google
• 138,66,70,0 - Hotmail
• 71,70,141,141 - School Homepage

Ok so now that you have all your coordinates written down lets get started on the code. First you need the code for your image:

1. <img src=
2. "imagename.gif"
3. alt="Cube" <-- This just displays the text "Cube" when you have your mouse over the picture.
4. usemap="#cube_map" <--This tells the browser to make the image you have selected into an Image Map. Don't forget to add "_map" after the name of your image in this tag.
5. and finally add border=0>

6. First you must use <map name="cube_map"> so the browser knows what image you are using, and instead of using the name cube you would fill in the name of your picture with out the .gif or .jpg or what ever the file extention is.
7. Now you can get started on the coordinates <area shape=rect coords="
8. Then you fill in ONE of your coordinates, for example 0,0,68,69 then you end the quote "
9. Right after that you can add your link like so href="http://www.gamespy.com"> and no thats not a spelling mistake, it's not - a href="http://www.gamespy.com"> - don't ask why it just works...
10. And your done all you have to do is repeat step's 7,8, and 9.
11. The ending tag to all of this is </map>

In the end it should look somthing like this:

<img src="cube.gif" alt="Cube" usemap="#cube_map" border=0>

<map name="cube_map">

<area shape=rect coords="0,0,68,69" href="http://www.gamespy.com">

<area shape=rect coords="61,70,0,141" href="http://www.google.ca">

<area shape=rect coords="138,66,70,0> href="http://www.hotmail.com">

<area shape=rect coords="71,70,141,141" href="http://www.sd61.bc.ca/">

</map>

And yes you can have more that four links you just need more coordinates. And thats how you create an Image Map!