|
Creating an image map tutorial
To do this tutorial, you need a sliced layout and MS paint. I will use the layout I have sliced and coded in my previous tutorials. |
| Step 1: Below you will find the image I want to map. What is mapping? Simple! You have an image and you want part of it to be clickable so you can insert a link! Want I want, is that when I click on home or dolls that it brings me to the appropriate page. |
 |
| Step 2: First of all, create a copy of this image. Keep the original one safe and open the copy in MS Paint. With the line tool draw a rectangle around the areas you want to be clickable. This is only a guideline to help us for the next step of this tutorial. |
 |
| Step 3: put the pencil tool in the top left corner of the first area. At the bottom of the screen you will see numbers, write them down on a piece of paper. |
  |
| Step 4: Repeat step 3 but put the pencil tool in the bottom right corner of the first area. Write down the numbers at the bottom of the screen. You should now have 4 values: 102,10,169,39. |
  |
| Step 5: Repeat those two steps for all the areas you want to map. |
Home: 102,10,169,39 Dolls: 187,9,247,39 |
| Step 6: To create the map you will need two html codes. The first code will replace your actual image code. Replace the red part with your own informations. So locate the image in your html page, delete it and replace it with the code below: |
| <img src="NAMEOFYOURIMAGE.gif" usemap="#NAMEOFYOURMAP" width="WIDTHOFYOURIMAGE" height="HEIGHTOFYOURIMAGE" alt="" border="0">
NAMEOFYOURIMAGE: This is the name of your image, replace the capslock with your image name
<img src="tut_05.gif" usemap="#menu" width="350" height="49" alt="" border="0">
NAMEOFYOURMAP: This is the name you want to give your map. If you have more then one map, this is usefull to know which map is what. You can give it any name but I suggest you to write it down cause we will need it for the second part of the map code. WIDTH: this is the width of your image. HEIGHT: this is the height of your image. This is my code with all the values replaced: |
| Step 7: The second code will be the map itself. Copy the code below just after the opening body tag of you html page. Again replace the values in red with your own informations. |
<map name="MAPNAME">
<area shape="rect" coords="0,0,50,50" href="LINK.html" target="_blank" alt=""> <area shape="rect" coords="50,0,100,50" href="LINK.html" target="_blank" alt=""> </map> MAPNAME: Replace this with the name you gave to your map in the previous step. (in my case it's menu). 0,0,50,50: Replace this with the values found in step 3, 4 and 5 for each links. LINK: Replace this with the name of the html page you want to link. * If you are coding a iframe layout and you want your links to open in the frame don't forget to replace the target blank with the name of your Iframe. This is my code with all the values replaced: <map name="menu"> <area shape="rect" coords="102,10,169,39" href="home.html" target="_blank" alt=""> <area shape="rect" coords="187,9,247,39" href="dolls.html" target="_blank" alt=""> </map> |
| Step 8: Below you will find my index page coding with capslock note to help you see where to put the codes if it was not clear in the previous step. This is what you should have by now: Clickie. Mouse over the links and click them to see what happend! Wow it's working! |
|
Congratulations, you have coded your first image map! In my example my image had text links but you could map a enveloppe image that when visitors click on it, they
can contact you! You can map any kind of graphics! Any questions? Click here |