EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > HTML > Links


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  HTML Links :
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 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">


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.



 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!
FACT:
Netscape browsers use a different color definition for it's HTML than what it uses for images on the page.
TIP:
Use one of the 216 safe colors or use a plain background image in a non-safe color to make sure the background of your page match the images.





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho