Basic HTML

 
 
          

Images >> Image Mapping

 

Image Mapping

It is possible to make one image link to several pages, depending on where the image is clicked.


This technique is called imagemapping.


You simply specify which areas of the image should link to where.


In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the lower right corner.... it links to google.



<img src="sample_image.wmf" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.google.com">
</map>


In the above example we only used rectangular imagemappings. Possible shapes are:

  • <area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
  • <area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">
  • <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">

There are excellent tools out there to help you create imagemaps. No one calculates the coordinates by hand.


If you want to use imagemaps on your site you will need to get a program that will allow you to simply drag the mouse over the areas you want to work as links.

Images >> Text Wrapping Background >> Color