Create your own Image Map

 

Create Your Own Image Map

Here is a very simple and effective way to make your Image Map.
What's an Image Map you say? Well it's a very effective way of creating "Hot Spots" on an Image and using them to create links.

Each "Hot Spot" requires four coordinates, which are separated by commas, to create a link. The first two define the top left position of the "Hot Spot" and the second two define its bottom right position.
It is mandatory that the size of the image be known for the map to work properly. Take your image to The Professor's Image Sizer before attempting a map with one of your own images.

Please first read the instructions

  1. Move the arrow to the top left of the left 4 pane window
  2. Now look at the Status Bar and you will see schoolhouse.gif?25,92
  3. Now click it and you will see the School House Image
  4. In the address bar you will see this screen shot
    92address bar
  5. Write these Nos down as they are the 1st set of coordinates
  6. Now tap your Back Button
  7. This time move the arrow to the bottom right of the left 4 pane window
  8. Now look at the Status Bar and you will see schoolhouse.gif?41,108
  9. Now click it and you will see the School House Image
  10. In the address bar you will see this screen shot
    108address bar
  11. Write these Nos down as they are the 2nd set of coordinates
schoolhouse
Repeat the above 11 steps for each "Hot Spot" that you wish to create. The coordinates are then placed in this basic Image Map Code. This code is set for 3 "Hot Spots but can be easily adjusted by just increasing or decreasing the No of <area shapes. The usemap name and the map name must be the same.
Lets Do It
Just C & P this code and take it to the Prof's Test Bed by entering the door into School House. Replace the ? marks with the appropriate image values, enter the coordinates that you determine and watch your own Image Map develop right before your eyes.

  • <body bgcolor="#1a1a1a"><center>
    <p>&nbsp;<p>
    <a href="your image url"><img src="your image url" width="?" height="?" alt="description" border="0" ismap></a>
    <p>
    <img src="url of image" border=0 width=? height=? usemap="#mymap1">
    <map name="mymap1">
    <area shape=rect coords="?,?,?,?" href="url goes here">
    <area shape=rect coords="?,?,?,?" href="url goes here">
    <area shape=rect coords="?,?,?,?" href="url goes here">
    </map>
Then C & P the finished code into your sig box or Web Page.
mymap prof tools testbed
homeValid HTML 4.01 Transitional HTML Hit Counter

copyrite 2001 by The Professor