Earlier you saw how to make an entire picture act as a hyperlink to some other link. Since the early days of the web, there has been a way to have different parts of an inline image be hyperlinked-- this is known as a "clickable image map".
Until recently, the clickable image maps required that some things be processed from the web server. This is how it works:
- The viewer sees a page with clickable image map and... clicks on a part of the image.
- The Web browser notice's this and sends a message to the web server, telling it that someone clicked at these particular coordinates.
- The web server gets the coordinates and then checks them against pre-recorded coodinates in the web file. If the coordinates match those on file then a URL is sent to the viewer.
- Once the web browser recieves the URL information, it goes there.
This is a server-side process; one that was pretty efficient and a web server could handle it in a split second. But it meant that to use clickable image maps one always had to have access to a web server.
Browser's are now built with the capability to handle the calculations and transmit the proper URL based upon coordinates that were built inside the HTML for a page. This is a client-side process. That entire conversation above now takes place just between the browser and itself!
The HTML needed for a client-side clickable image map is:
<img src="image.gif" usemap="#map_name">
where image.gif is the file name of the image and map_name is an anchor link elsewhere in the same HTML file:
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
Each line in the <map>...</map> tag identifies a different "hot" region, specified by the coordinates, coords=x1,y1 are the horizontal and vertical pixel locations for the upper left corner (relative to the upper left corner of the entire image), while x2,y2 are the horizontal and vertical pixel locations for the lower right corner. URL1, URL2, ... are the URLs that the region should correspond to when clicked.
NOTE: To identify the coordinates for the hot region you will have to use some sort of graphics program.
Okay, now lets convert the world map to an image map, I'm using the
program Lview Pro to get the coordinates.
<img src="image.gif" usemap="#map_name">
The code becomes :
<img src="world.gif" usemap="#worldmap" border=0>
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
This code becomes :
<map name="worldmap">
<area shape="rect" coords="0,0,90,45" HREF=less-a6.htm#top>
<area shape="rect" coords="0,45,90,90" HREF=less-a5.htm#top>
</map>
Let's see the working result :