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 hotbot.
<img src="rainbow.gif" usemap = #example border=0> |
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
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.
Most HTML editors have this as a built-in function.
If you do not use an HTML editor, you can still get programs that will do this boring job for you - best thing is - you can get it for free!
Below are links to websites that will help you create your imagemaps on the fly.
Just make sure that the image is uploaded to the web before using these tools.