Imagemaps shouldn't be confused with just turning an image into a link. Imagemaps can have many "buttons" defined in them while simple image links can only have one.
Another example would be a group photo as an imagemap. When a user clicked on a person's face, a page with information about that person would appear.
There are several programs for making mapfiles, here are two popular programs:
For the Windows and Unix platforms, Mapedit is available from
http://www.boutell.com/mapedit/
Macintosh users have several imagemap editors to choose from as well, including WebMap available at http://www.city.net/ cnx/soft ware/webmap.html
Remote Host Name: ftp.ncsu.edu
User Name: anonymous
Password: your_email_address
/pub/unity/lockers/project/cc-education/adv_html/
cp /afs/unity.ncsu.edu/project/www/ncsu/cc/edu/html_trng/advclass /buttons.gif .Note that you shouldn't include the line break.
add wwwStart the Mapedit program by typing
mapedit &
For PC users, the graphic is in the C:\ directory.
Workstation users should
omit the drive letters (c:\).
Map Filename:
c:\myfirst.map
GIF Filename:
c:\buttons.gif
It's standard practice to end map filenames with ".map", but you don't
have to.The only other detail PC users need to attend to is to make sure the "NCSA" button is selected. There are two programs which deal with imagemaps, and NCSU uses the NCSA program. NCSA stands for National Center for Supercomputing Applications.
When you press OK, the program will complain that the map file doesn't exist, and ask you to confirm that you want to create it. Click on OK to confirm that you want to create the file and continue.
PC Users:
From the "Tools" menu, select "Rectangle". Position the mouse pointer in
the upper-left of the graphic's square button. Press the left mouse button
once and release. Move the mouse pointer to the lower-right of the square
button. Press the right mouse button once.
Workstation Users:
Use the first and second mouse buttons (MB1 and MB2) to start and finish
drawing the button regions.
Note: If you're using a PC and your rectangle gets messy, you can press [ESC] to cancel what you've done and start over. If you're using a workstation, press the [cancel] button.
Once you complete a region, a dialog box will appear into which you should type the full URL you want associated with the rectangle (no relative linking). If you don't know the URL, type something informative so you can remember where the link was supposed to go. You can edit the map file after it has been created, which allows you to go look up the URL and insert it. In this case, type in the URL of NCSU's homepage: http://www.ncsu.edu/
Define the other two buttons by selecting the appropriate tool , outlining the button, and entering the URL.
For the circular button, use
http://www2.ncsu.edu/ncsu/cc/pub/tutorials/tutor_page.html
The Circle tool draws from the center outward.
To use the Polygon tool, click on each vertex of the polygon until you've reached the last vertex, where you should click the right or MB1 button to finish. Although you may not close the polygon's sides, the imagemap program will interpret the two end points as being connected.
For the polygonal button, use a URL of your choice, your homepage perhaps(?)
To define a default URL using Mapedit, select the "File" menu and choose "Edit Default URL". Enter the URL of the default file. In this case, enter "default.html" -- we'll create this file later.
Note: You cannot use relative linking when creating map files. You must specify full URLs in the map file.
Click on your image using the left button. When you click in a button region a window with the associated URL will appear and the region will be highlighted. Test all three of your buttons.
Note: If you click outside all regions, the default URL will not be shown while in "Test" mode, but any highlighted window will disappear.
<html>
<h2>You missed!</h2>
<hr>
Please go back and try again.
</html>
Note: PC users will create files that end with .htm. These files will be renamed later.
What you're doing is creating a hypertext link to the image map that surrounds the image itself. For example, if your map file is "myfirst.map", and your image is "buttons.gif", the line to link the map and the image would look like:
<A
HREF="http://www4.ncsu.edu/cgi-bin/imagemap/~rmnixon/www/myfirst.map">
<IMG SRC="buttons.gif" ISMAP>
</A>
When someone clicks on the image, the <A HREF> tag calls the imagemap program in the cgi-bin directory (http://www4.ncsu.edu/cgi-bin/imagemap). The rest of the statement sends the imagemap program the location of your particular map file and image.
The use of the ISMAP attribute in the <IMG> tag indicates that the graphic is an imagemap and, as a standard HTML tag, will work with any browser that supports imagemaps.
Remote Host Name: ftp.ncsu.edu
User Name: your_userID
Password: your_password
http://www4.ncsu.edu/~userID/path/file.html
For example, http://www4.ncsu.edu/~rmnixon/www/home.html
or, if you prefer the old way
http://www4.ncsu.edu/unity/users/first_letter_of_userID/userID/path/file.html
Once the page is loaded, click away. You've done it!