HTML MAP LINKS

Map Links

The idea of this is you can have an image of your products or what your site is about and you can put links in to those product pages or whatever, or you can use this to lable an illustration, or name people in a photo and maybe click there face to email them?
These are 300 by 200 gif and jpg but could easily be any size. The origin 0,0 is in the top left hand corner and the first co-ord is distance from the left, going right and the second is the distance down.
Start with the map name and then the co-ords of the rectangle of the area you wish to use as the link coords="0,0,10,10" and the place you want to link to href=TOP-LEFT and finally any pop-up alt or title="Top Left 0,0"
Other Area shapes can be CIRCLE and POLY. Area Type also works.
<area shape="rect" coords="0,0,100,50" alt="0x,0y to 100x,50y" href="wherever.htm" />
<area shape="circle" coords="100,50,25" alt="25 rad at 100x,50y" href="wherever.htm" />
If two shapes overlap the top/first line in the file will be dominant. (See below)
I've just put #names but this could mailto: address' or web address' as links

<CENTER><MAP name="tester">
<AREA type=rect coords="0,0,10,10 Using ALT" href=#TOPLEFTlink alt="Top Left 0,0 Alt" Title="top Left 0,0 Title">
<AREA type=rect coords="50,50,100,100" href=#squarelink1 alt="50,50-100,100 ALT" title="50,50-100,100 TITLE">
<AREA type=rect coords="200,50,250,100" href=#squarelink2 alt="200,50-250,100 ALT" title="200,50-250,100 TITLE">
<AREA type=rect coords="290,190,300,200" href=bottom-right alt="Low Right 300,200 Alt" title="low right 300,200 title">
</MAP>
 Then when you call in the image you just add usemap="#tester"
<IMG SRC="picagif.gif" BORDER=2 usemap="#tester" HEIGHT=200 WIDTH=300>
<IMG SRC="picagif2.jpg" BORDER=2 usemap="#tester2" HEIGHT=200 WIDTH=300>

I've used the same data for #tester2 except where the second square was is now a circle hence
<area shape=circle coords="225,75,75" href=CIRCLE_link alt="2 225,75 rad 75 alt" title="2 225,75 rad 75 title">
and I added 2 more areas
<area type=rect coords="6,6,294,194" href=everything_else alt="BackGround alt" title="BackGround title">
<area type=rect coords="0,0,300,200" href=EDGE alt="EDGE alt" title="EDGE title">

Source code
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="Author" content="nik">
 <meta name="GENERATOR" content="Mozilla/4.8 [en] (Windows NT 5.0; U) [Netscape]">
 <meta name="Description" content="How to create multiple links on an image in specific areas.">
 <meta name="KeyWords" content="area,map,link,image,htm,html,web,www,internet,edit">
 <title>HTML MAP LINKS</title>
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body text="#000000" bgcolor="#FFFF99" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<center><map name="tester"><area type=rect coords="0,0,10,10 Using ALT" href=TOP-LEFT alt="Top Left 0,0 Alt" Title="top Left 0,0 Title"><area type=rect coords="50,50,75,75" href=toplh alt="Top LH of square ALT" title="Top LH of square TITLE"><area type=rect coords="50,50,100,100" href=SQUARE_link alt="rest of rect ALT" title="rest of rect TITLE"><area type=rect coords="0,196,4,200" href=50,50-100,100 alt="this is 4 by 4 ALT" title="this is 4 by 4 TITLE"><area type=rect coords="200,50,250,100" href=SQUARE_link alt="200,50-250,100 ALT" title="200,50-250,100 TITLE"><area type=rect coords="290,190,300,200" href=bottom-right alt="Low Right 300,200 Alt" title="low right 300,200 title"></map>Map
Links
 <map name="tester2"><area type=rect coords="0,0,10,10" href=2TOP-LEFT alt="2 Top Left 0,0 alt" title="2 Top Left 0,0 title"><area type=rect coords="50,50,100,100" href=SQUARE_link alt="2 50,50-100,100 alt" title="2 50,50-100,100 title"><area type=rect coords="0,196,4,200" href=50,50-100,100 alt="2 this is 4 by 4 ALT" title="2 this is 4 by 4 TITLE"><area shape=circle coords="225,75,75" href=CIRCLE_list alt="2 225,75 rad 75 alt" title="2 225,75 rad 75 title"><area type=rect coords="290,190,300,200" href=2bottom-right alt="2 Bottom Right 300,200 alt" title="2 Bottom Right 300,200 titl<ar<area type=rect coords="6,6,294,194" href=everything_else alt="BackGround alt" title="BackGround title"><area type=rect coords="0,0,300,200" href=EDGE alt="EDGE alt" title="EDGE title"></map></center>
 
<blockquote>    The idea of this is you can
have an image of your products or what your site is about and you can put
links in to those product pages or whatever, or you can use this to lable
an illustration, or name people in a photo and maybe click there face to
email them?
 These are 300 by 200 gif and jpg but could easily be
any size. The origin 0,0 is in the top left hand corner and the first co-ord
is distance from the left, going right and the second is the distance down.
 Start with the map name and then the co-ords of the rectangle
of the area you wish to use as the link coords="0,0,10,10" and the place
you want to link to href=TOP-LEFT and finally any pop-up alt or title="Top
Left 0,0"
 Other Area shapes can be CIRCLE and POLY. Area Type also
works.
 <area shape="rect" coords="0,0,100,50" alt="0x,0y
to 100x,50y" href="wherever.htm" />
 <area shape="circle" coords="100,50,25" alt="25 rad
at 100x,50y" href="wherever.htm" />
 If two shapes overlap the top/first line in the file
will be dominant. (See below)
 I've just put #names but this could mailto: address'
or web address' as links
  
<CENTER><MAP name="tester">
 <AREA type=rect coords="0,0,10,10 Using ALT" href=#TOPLEFTlink
alt="Top Left 0,0 Alt" Title="top Left 0,0 Title">
 <AREA type=rect coords="50,50,100,100" href=#squarelink1 
alt="50,50-100,100 ALT" title="50,50-100,100 TITLE">
 <AREA type=rect coords="200,50,250,100" href=#squarelink2
alt="200,50-250,100 ALT" title="200,50-250,100 TITLE">
 <AREA type=rect coords="290,190,300,200" href=bottom-right  
alt="Low Right 300,200 Alt" title="low right 300,200 title">
 </MAP>
     Then when you call in the image you
just add usemap="#tester"
<IMG SRC="picagif.gif" BORDER=2 usemap="#tester" HEIGHT=200
WIDTH=300>
 <IMG SRC="picagif2.jpg" BORDER=2 usemap="#tester2"
HEIGHT=200 WIDTH=300></blockquote>
<center>
 <img SRC="picagif.gif" BORDER=2 usemap="#tester" height=200 width=300><img SRC="picagif2.jpg" BORDER=2 usemap="#tester2" height=200 width=300></center>
<blockquote>I've used the same data for #tester2 except where
the second square was is now a circle hence
<area shape=circle coords="225,75,75" href=CIRCLE_link
alt="2 225,75 rad 75 alt" title="2 225,75 rad 75 title">
and I added 2 more areas
<area type=rect coords="6,6,294,194" href=everything_else 
alt="BackGround alt" title="BackGround title">
<area type=rect coords="0,0,300,200" href=EDGE 
alt="EDGE alt" title="EDGE title">
<center>
<a href="index.htm"><img SRC="but_home.gif" ALT="Home" BORDER=0 title="Home" height=32 width=128></a></center>
</blockquote>
</body>
</html>