links home html css js

<p align="center">
   <img src="images/pages.gif" width="384" height="245"
      alt="links" usemap="#links" >
   <map name="links">
      <area shape="circle" coords="186,44,45" 
         href="../index.html" alt="home">
      <area shape="circle" coords="42,171,45" 
         href="indexht.html" alt="html">
      <area shape="circle" coords="186,171,45"
     href="../csssite/indexcss.html"     alt="css">
      <area shape="circle" coords="318,173,45"
         href="../javascript/indexjs.html" alt="js">

Clickable regions within images:

The src attribute on the img element specifies the image
"pages.gif". The usemap attribute references a map element.
It uses a Web address to do so, hence the # character.

The map element specifies which regions in the image
act as hypertext links.

The area element is used to define a region on 
the image and to bind it to a Web address. 
The shape attribute specifies "rect", "circle" or "poly".
The coords attribute specifies the coordinates for
the region depending on the shape.

rect: left-x, top-y, right-x, bottom-y
circle: center-x, center-y, radius
poly: x1,y1, x2,y2, ... xn,yn
The top left pixel is considered as the origin
 of the image with x and y both equal to zero,
 x increases rightwards across the image and y 
increases downwards. 
Most image manipulation tools allow 
you to find the pixel coordinates of any
given point in the image.

The alt attribute on the area element is used 
to supply a text label for the link. 
Without it the image map is inaccessible 
to people who can't see the image.