Welcome to Our Free Tutorial!

HTML Image Maps

Image maps are images with clickable areas (its referred to as "hotspots" ) that’s is basically link to another pages. Image maps can be really effective.

To Create an Image Map:

1. First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder).

2.Use the HTML <map> tag to create a map with a name. Inside this tag, you must specify where the clickable areas are with the HTML area tag.

3.Use the HTML <img> tag to link to this image. In the < img> tag, use with the usemap attribute.

Image Map Example:


<img src =" " width="225" height="151" border="0" alt="Illustration Painting"usemap ="# painting " />
<map id ="painting"name=" painting "><area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');" alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href =" " alt="Illustrator" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href =" " alt="Mueller Hut" />


Illustration Painting We are Flaying in the sky!!!!!! Illustrator Boys Flaying