Chapter 3 discusses handling images in HTML, including using images as hot spots and creating image maps with multiple clickable areas. It explains how to link multimedia files such as videos and audio using anchor tags, and includes textual exercises to reinforce learning of the concepts. Key HTML elements covered include <img>, <map>, and <area> tags for integrating images and multimedia into web documents.

1. Chapter 3
Handling Images
in HTML
Image as a Hot Spot
Image Map
Linking Multimedia Files
Solving Textual Exercise

2. Image as a Hot Spot
• In Online shopping sites we see small images of many items
displayed with brief information of each, and when we click on
these small image to see detailed information then we are
redirected to a page containing the bigger and good quality
image of the selected item.
• The small image itself has to link to the other suitable page.
• This can be done by applying a link to each of the small image
on a page. Here the image is considered as hot text.
• Instead of using text as hyperlink, here we will use image as
hyperlink
• Since there is no text here, it is identified as hot spot.
2

3. Image Map
• In previous section, we have added a link to an image.
• It is also possible to add multiple links to an image.
Each link points to different reference.
• To create multiple links within a single image, we need
to create multiple clickable locations within the
image.
• Clicking on each such location, a particular
reference(page) can be opened. Each such location is
called a hot spot.
• In case you have a map (suppose map of India) then
some regions of the map (states like Gujarat,
Maharashtra etc) can be defined as hot spots. When
one clicks on such hot spot, new web page can be
opened.
3

4. IMAGE MAP
4
• To do image map, we need image with different shapes like rectangle, circle or
polygon and we will set link on these areas/shapes as hotspot.
• The location of a hot spot is mentioned using the x and y co-ordinates
• Rectangle is measured from the top left and bottom right hand corner.
• Circle need only center value (x,y) and radius
• Polygon with many points

5. • Syntax:
<img src=“ “ usemap=“#my_list”>
<map name="my_list">
<area shape="rect/circle/poly" coords=" " alt="some text goes here" href="xyz.html">
</map>
• Within the <map> and </map> tags, the hot spot co-ordinates and their corresponding
links are to be specified.
• <map> and <area> tags are used along with a usemap attribute into its image map.
• The map tag has an attribute called name. The map attribute value must be matching with
the usemap attribute.
• The area tag must mention the shape of a hotspot. The valid possible shape are circle,
rectangle (specified by rect) and polygon (specified by poly).
Image Map
5

6. Linking Multimedia File
• A Video as well as an audio file can be integrated into an HTML document
using an anchor tag
<a href="abc.mp4"> Click here to see the content…..</a>
• If the referred movie file is available on some other website or remote
place, first it will be transferred to the user's computer.
• Such files are stored in local directory of user's computer as temporary
internet files.
• To add a sound file in an HTML code
<a href="xyz.mp3"> Enjoy this sound….!</a>
6

7. TEXTUAL EXERCISE
7
1) Which of the following tag is used to insert a video file into an HTML document?
href
2) As the image element does not cause a line break, it is also referred to as which of the following?
An inline image
3) Which one of the following is a valid image file format?
Png
4) Which of the following is provided when we use alt attribute of an image?
Alternative description
5) Which of the following attributes specify the values of height and width of the image in pixels?
Height and width
6) Which of the following is not a valid image format?
Imv
7) Which of the following concept is used to display whole image as a link?
Image as hot spot
8) Which of the following are the two types of image maps?
Server side and client side
9) Which of the following tag is used to add an image map?
Map
Textual Exercise

8. Category 1
1) Which term is used when an image is used as hyperlink
instead of text?
2) Which tag is used to mention the shape of hot spot?
3) Which attribute is used to insert a video or audio file into an
HTML document?
Category 2
1) Which term is used for multiple clickable locations within the
image?
2) Which attribute of <area> tag is used to specify the link of
the hot spots?
3) Which attribute of <img> tag specifies the name of the map?
Brain Storming Session

9. THANKYOU
9