|
|
| |
|
|
HTML Links : IMAGE MAPPING
|
It is possible to make one image link to several pages, dependent on where the image is clicked.
The technique used for this 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>
<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.hotbot.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">
Note:
There are excellent tools out there to help you create imagemaps. Nobody 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 has this build-in-function.
If you do not use a html-editor, however, 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 online webpages 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.
|
|
| |
|
