An image that is located within an ordinary HREF anchor tag can be clicked to follow the link, but you follow that same link no matter where within the image your mouse pointer was when you clicked the button. An image map is a single image that provides multiple links: the result of clicking in the image depends on the precise location of the mouse pointer at the time it was clicked.
For example, see the on-line Athens Campus Map.
Some servers support image maps by using CGI scripts, with resulting restrictions on the location of one or more of the component files. The web server software on OAK and that on the Front Door server both support imagemaps with a built-in program configured so that all the component files are located within the user's web subdirectory.
Because client-side (browser) imagemaps are not universally supported, the best way to create imagemaps is to use software running on the server to interpret the location of the mouse-click and return the appropriate resource. These are called server-side imagemaps. They do have the disadvantage of requiring a complete round-trip from the browser to the server and back, and they significantly increase the load on the server, especially for busy pages. Imagemaps are therefore rarely the ideal solution for routine navigational pages guiding new visitors to your information. It is possible to arrange multiple images, each of which is a link, to provide a very similar effect with any graphical browser.
Imagemaps are server-specific. The following discussion is based on the imagemap support currently provided by OAK and the Front Door server.
Three items are required in order to create an image map on OAK or the Front Door server:
For example:
<A HREF=image.map><IMG BORDER=0 SRC=image.gif ISMAP ALT="Go to text menu."></A>
The URLs given for the .MAP and the .GIF files in the HTML source can be absolute or relative. To simplify creation and testing, as described below, you will often choose to locate the HTML file, the .GIF file, and the .MAP file in the same subdirectory. In such a case, you would need only to specify the filenames in the URLs.
The .MAP data file contains one or more lines of text. Each line has three parts:
The "CERN" and "NCSA" formats for .MAP data files differ in the sequence of those items on the line, in the abbreviations used, and in the punctuation used. The procedure for preparing the .MAP file is straightforward, but several parts of it can be tedious. It is discussed in detail in Memo 85, Appendix III.
Without getting into too much detail about how it works, if you want pages to load automatically, you can do so using a form of the <META> tag. Let's say you have three different pages and you would like the browser to automatically cycle through the pages. You can accomplish this by putting the following in the <HEAD> part of your web page. I will explain the syntax in class.
This is actually useful in cases where you have re-organized your Web site and a former page is no longer being used. This can frustrate people who find links to the abandoned page from other pages that haven't yet been updated, or get hits from search engines whose database is not current. What you can do is to create a replacement page for the old one, which uses the META tag to dynamically load the correct replacement page. See the discussion at
Take the shortcut for "Standards", then the shortcut for "Technical Issues", and scroll down to item 6.
Sounds are fun and can really spice up a web page. If you have the capability to record your voice on your machine, I would recommend doing so. To put a sound in web page, all you have to do is make a link to the file.
Example:
[The example has been retired, because the graduate student who created it has a real job now, and does not maintain a Web page here any more. A new example will be added here in the future.]
Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/html2/fun.html) on October 25, 2000.
Please E-mail any comments or suggestions to acatec@www.ohiou.edu.