Image Maps
- Image maps are commonly used on web pages. The concept is simple but the implementation is sometimes tedious. The idea is to divide an image into smaller sections and use x,y coordinates to define the sections. Then for each section of the image you can use HTML to program a unique link or some other brower behaviour when the user clicks on that section of the image.
A Dash of JavaScript
-
Images maps can cause alot of interaction between the server and the client (your browser) causing delays during the processing of the information. In order to prevent any network traffic this lesson introduces a JavaScript event handler called "onMouseOver". The following code is used to send a message to the status bar of the browser.
<a href="nowhere.html" onMouseOver="window.status='A Link to Nowhere'; return true">sample link 1</a>Notice when you move the mouse over the link, the status bar display the message "A Link to Nowhere". Usually the address of the link destination is shown in the status bar. Did you ever notice? Here the same link without the onMouseOver handler code.
<a href="nowhere.html">sample link 2</a>Notice the status bar when you move the mouse over the link. We will use the onMouseOver status display capabilities to demonstrate how image maps work.
A simple Image Map
-
It easiest to make image maps from retangular figures. We'll use the following image to create an image map.
More Complex Example
-
This image of a keyboard is used to create a more complicated image map.
CGI image maps
- Section5Text
Review
- Section6Text