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 |
- Move the arrow to the top left of the left 4 pane window
- Now look at the Status Bar and you will see
schoolhouse.gif?25,92
- Now click it and you will see the School House Image
- In the address bar you will see this screen shot
- Write these Nos down as they are the 1st set of coordinates
- Now tap your Back Button
- This time move the arrow to the bottom right of the left 4 pane window
- Now look at the Status Bar and you will see
schoolhouse.gif?41,108
- Now click it and you will see the School House Image
- In the address bar you will see this screen shot
- Write these Nos down as they are the 2nd set of coordinates
|
|
|
| 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> <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 Web Page |
|
|
