Such a graphic is called an IMAGE MAP
To set this up, you need to define "hotspots" in your image. Each of these hotspots are then set up as links, and anyone who clicks anywhere on a particular hotspot in the graphic will be taken to the link you specified when you wrote the code. You also need to specify where you want the user taken in case he or she clicks on the graphic, but outside any of your hotspots.
How do you define these hotspots in a graphic?
You have to specify the coordinates of hotspots within your graphic. These coordinates define the locations of the hotspots that can be in the shape of a rectangle, a circle, or or a polygon.
How do you figure out the coordinates of the hotspots you wish to define?
There are several ways. High end HTML editors and high end graphics editors often include routines to do this relatively painlessly. CorelDraw, for example, and MicroSoft Front Page contain such routines. It is also possible to uses NETSCAPE itself to help you determine these coordinates (go to http://www.adn.uwrf.edu/httpdocs/ismaps.htm for a full explanation of how to use NETSCAPE for this purpose).
But, using NETSCAPE to figure out coordinates is tedious and error-pronte.
Probably the most practical way to figure this out, however, and to generate the HTML code you need is to use some excellent software that, like NETSCAPE, is free to educational users. (You can download a trial version, and you can license it permanently and for free by phone, e-mail, or FAX.)
This software is called MapEdit. You can download a self-extracting version of MapEdit at:
(The home page of the above site is http://www.boutell.com)
Go to that site and download the software into your Temp directory, then use WINDOWS Explorer to view the file and double click it. (The version I downloaded is called map32dst.exe). You will then be walked through the installation procedure, after which you can delete the map32dst.exe file from your hard drive.
Now, you can use MapEdit to define all the hotspots in a graphic and to write all the HTML code to set up the links for each hotspot.
Let us suppose that you have visited the ICON SAMPLER page. Let us say you visited this page and you have found and copied the following .gif graphic (called happy_hal.gif) that you like:
Suppose further that you have decided that you want to make this image an image map with hot links as follows:
<HTML>
<HEAD>
<TITLE> Test file for MapEdit </TITLE>
</HEAD>
<BODY>
<H1> This Is A Test of MapEdit </H1> <P>
<IMG SRC="happy_hal.gif"> <P>
</BODY>
</HTML>
Also, copy the happy_hal.gif graphic above point to the graphic on this page and right click it. Be sure that both files are saved on a diskette in the A drive.
Now open MapEdit and follow these steps:
_____1. Click on File and Open/Create.
_____2. Click on the Browse button above the first field labeled "Map or HTML file."
_____3. Make sure you have selected the A drive and "All Extensions" (under File Type).
_____4. Highlight the file named test1.html and click the OPEN button.
_____5. In the SELECT INLINE IMAGE box, highlight happy_hal.gif and click the OK button.
_____6. The OPEN/CREATE MAP box will show test1.html and happy_hal.gif as your selections.
_____7. Click OK.
_____8. MapEdit will open that graphic, which you will see on the screen.
Now that you have the graphic and test1.html loaded into MapEdit, you can begin to define the hotspots and the links you want each hotspot associated with. To do that, follow these directions:
_____1. Click on TOOLS, and make sure that there is a checkmark ONLY next to rectangle.
_____2. Now, draw a rectangle around the "H" in "Happy" by pointing at a spot just to the upper left of the letter, holding down the left mouse button, and dragging to the right and down until there is a rectange around the "H."
_____3. Without moving the mouse at all, press the RIGHT mouse button to open the OBJECT URL box for that hotspot.
_____4. In the field labeled "URL FOR CLICKS ON THIS OBJECT" type the URL for the SB204 Home Page, which is http://unr.edu:80/homepage/sb204/
_____5. In the ALTERNATE TEXT field, type "Go to SB204 Page"
_____6. Leave the other fields blank and click the OK button.
_____7. Now do the same thing for the Y in HAPPY, using the URL for the stat page. This is: http://unr.edu:80/homepage/maddux/stat/statpage.html
_____8. Now do the same thing for the a in HALLOWEEN, using the URL for the cll page. This is: http://www.unr.edu/cll/
_____9. When you are through, you will see the graphic with the three rectangles drawn on it.
MapEdit will now write the HTML to associate those three URL's with the three hotspots you have identified. It will write the HTML into the test1.html file. To accomplish this, follow these steps:
_____1. On the MapEdit toolbar, click on File and Save. You will see the light go on on your A drive as MapEdit makes the changes you have ordered in test1.html.
Now close MapEdit and test your imagemap as follows:
_____1. Click on File and Exit in the MapEdit toolbar.
_____2. Return to Netscape and open the test1.html file.
_____3. Experiment by clicking on the H in Happy, the Y in Happy, and the a in Halloween to see if the imagemap works as you want it to.
The following is an imagemap that has been done correctly. It works as yours should work. Click on the H, the y, and the a and this will test it. View the code to see what MapEdit wrote:
University
of Nevada, Reno