Image Maps Client Side Coding HTML
| What is image mapping? Image mapping is a technique that you can apply to make one image link to different pages, depending on where you click it. You can control what areas of the image will link to what pages. Here is an example of HTML image mapping code. |
|
<img src="whatever.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.google.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.yahoo.com">
</map>
Image mapping is not only limited to rectangle. It is also possible to map image in other shapes like circle or polygon. Use the following code.
<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">
Image mapping can simply be done with notepad as long as you know the code. However, there are a lot of great tools that you create imagemaps such as dreamweaver. With HTML editor tools, you can simply just drag the mouse over the areas that you want to link.
If you do not want to pay for the tools, follow these links to get them for free.
|
