|
|
Tutorials
Html
|
Topic |
How to map an image using HTML?
|
|
Explanation |
Image Mapping:
A picture or an image(jpeg, gif.,) can be used as a link to other html page by using <img>, <map> and <area> tags. The image can be used as links just by having the coordinates of shapes like rectangle or circle or polygon.
Example Code:
<img src="tmahal.jpeg" usemap = #imgmap border=0>
<map name=imgmap>
<area shape=Rect Coords=30,30,59,59 Href="taj.jpg" Target="_blank">
<area shape=Rect Coords=100,60,129,80 Href="elephant.gif" Target="_blank" >
</map>
Result:
In the above example the rectangular image mappings have been used. We can also use shapes like circle or polygon:
<area shape=rect coords= x1,y1, x2,y2 Href="http://www.mycollege.com">
<area shape=circle coords= x1,y1, x2,y2 Href="http://www.funmin.com">
<area shape=polygon coords= x1,y1, x2,y2 Href="http://www.hiox.com">
Attributes for image area
Class
Indicates that the text is to be formatted using the specified class.
dir=direction
Indicates the direction (right or left) of the text to be displayed. Useful for languages which display left to right.
id="name"
You can name the text, which allows it to be referred and changed in a script (dynamic HTML).
NAME="NAME"
Name of an image map.
style= "style"
Defines the style for the text to be displayed
title="title"
You can give a text a title if you want. This provides some additional information about the text.
|
|
|
|
Home
Scripts
Tutorials
Images
Tools
Purchase
Snippets
