Highlights
All Snippets
Top 100 Snippets
Librarians
gbCodeLib

By Language
VB6
JavaScript
Perl
HTML
SQL
Java
DOS

GBIC >> Source Code >> HTML >> Snippet

Client-side image map


<!--
To be able to click on an image and go to a URL based on the position of the click, use image maps.
The picture does not have to be changed.
Add the usemap attribute in the img tag.  Let it point to the name of a map tag.  See example below:
-->

< img src = "mypicture.jpg" usemap = "directions" >

< map name = "directions" >
< area coords = "0,0,50,50" href = "URL01.htm" >
< area coords = "50,0,100,50" href = "URL02.htm" >
< area coords = "100,0,150,50" href = "URL03.htm" >
< area coords = "0,0, 150,150"   href = "" >
</ map >

<!--
Now, when a mouse is clicked on the image, the browser goes to the URL whose coordinates
fall within those specified by the <map> tag.  

The last <area> tag has coordinates the full size of the image.  This is used to catch any
mouse click not caught by the earlier <area> tags.

The noref attribute can also be used to take no action, as in the following example
-->

< area coords = "0,0,150,150" noref >