Image or in other words an image map is an image that can be clicked in the area sometimes people call it a "hotspot" which usually linkkan to another page. If used by an already understand, map images can be really effective. If used by a not yet understood, the map image can be potentially confusing. So how do I create an image map? For the map image :
you must do the following:
you must do the following:
- First, you need a picture. Create a picture using the typical (ie through an image editor, and then save it as a gif or jpeg images to a folder of your website).
- Use HTML tags <map> to create maps with the name. Inside this tag, you will determine which areas can be clicked with HTML tags <area>.
- Use HTML tags <img> to link to this image. In the img tag, use the attribute usemap to decide which folder to use (which we just defined).
Script :
<img src ="/pix/mueller_hut/mueller_hut_t.jpg" width="225" height="151" border="0" alt="Mueller Hut, Mount Cook, and I" usemap ="#muellermap" />
<map id ="muellermap"name="muellermap"> <area shape ="rect" coords ="90,80,120,151" href ="javascript:alert('Me');" target="_blank" alt="Me" /> <area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55" href ="http://en.wikipedia.org/wiki/Mount_Cook" target="_blank" alt="Mount Cook" /> <area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80" href ="http://www.natural-environment.com/places/mueller_hut.php" target="_blank" alt="Mueller Hut" /> </map>
In our example, we use the
<area> tag in conjunction with the shape and coord attributes. These accept the following attributes:
shape : Defines a shape for the clickable area. Possible values:
- default
- rect
- circle
- poly
coords : Specifies the coordinates of the clickable area. Coordinates are specified as follows:
So little do I create Image Maps with HTML code may be useful. For those still confused can refer to: http://www.quackit.com/html/tutorial/html_image_maps.cfm. (source). thank you.
