venkatesh.mansani@yahoo.
com Naresh i Technologies
image tags
Image Tags:
1) <img> => It is used to embed an image in an html page.
2) <map> ... <map> => It is used to define an image map. An image map
is an image with clickable areas.
3) <area> => It is used to define an area inside an image map.
4) <svg> … </svg> => It is used to define a container for SVG(Scalable
Vector Graphics). It allows to draw circle, rectangle, square, .. etc.,
Attributes of <img> tag:
1) src="..." => It is used to specify the path of an image.
2) width="..." => It is used to specify the width of an image.
3) height="..." => It is used to specify the height of an image.
4) alt="..." => It is used to specify the alternate text for an image. If the
browowser is unable to load an image then the specified text displayed.
5) usemap="..." => It is used to specify the map name. This value must
match with name attribute value in <map> tag.
Attributes of <map> tag:
1) name="..." => It is used to specify the name of map. This value must
match with usemap attribute value in <img> tag.
Attributes of <area> tag:
1) alt="..." => It is used to specify the alternate text for an image.
2) coords="..." => It is used to specify the coordinates of the area.
[email protected] Naresh i Technologies
3) href="..." => It is used to specify the path of an image.
4) shape="..." => It is used to specify the shape of the area.
Example1:
<html>
<body>
<img src="d:/roses&teddy.jpg" usemap="#demo" width="400"
height="400">
<map name="demo">
<area shape="rect" coords="50,250,100,100" href="d:/roses.avif">
<area shape="rect" coords="300,300,100,100" href="d:/teddy.webp">
</map>
</body>
</html>
Example2:
<html>
<body>
<a href="c:/flowers.jpg"><img src="c:/flowers.jpg" width=100
height=100 hspace=100 vspace=100></a>
<a href="c:/teddy.jpg"><img src="c:/teddy.jpg" width=100 height=100
hspace=100 vspace=100></a>
<a href="c:/roses.jpg"><img src="c:/roses.jpg" width=100
height=100></a>
</body>
[email protected] Naresh i Technologies
</html>
Example3:
<html>
<body>
<svg width="800" height="600">
<circle cx="100" cy="100" r="50" stroke="red" stroke-width="5"
fill="yellow"></circle>
<rect x="200" y="50" width="200" height="100" stroke="red"
stroke-width="5" fill="yellow"></rect>
<text x="220" y="80" fill="red">India</text>
<rect x="500" y="50" width="100" height="100" rx="20" ry="20"
stroke="red" stroke-width="5" fill="yellow"></rect>
</svg>
</body>
</html>
By
Mr. Venkatesh Mansani
Naresh i Technologies
