images in HTML

Image is used in HTML to display a picture.

To display image in HTML, we need to specify by <img> tag, there are some basic attributes:

• src: the local image location (relative location) or a http link.
• alt: it specifies an alternate text for an image, if the image cannot be displayed.
• style: define the width and height
• border: show the border

Sample code:

<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;">

image display on the browser:

To make the image linked to an URL, we may use anchor tag <a>

<a href="http://www.google.com">
<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;"/>
</a>

In major browser, when you move the mouse to the image, you will see it turns to be a hand


To make part of image linked to an URL, we may combine the image with map

<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;" usemap="#teamlink"/>
</a>

<map name="teamlink">
<area shape="rect" coords="0, 0, 200, 100" href="http://www.google.com">
<area shape="rect" coords="0, 100, 200, 200" href="http://www.baidu.com">
</map>