Transcript
Unit 7 – Images
Presentation 2
Web Programming
Objectives
At the end of this presentation, you will be able to• Convert images into hyperlinks• Add image maps to your Web page• Add image as background of your Web page
Image Map
• Different parts of an image can also be used as hyperlinks.
• This is known as Image Map
Hands-On!
• Open the HTML file Imagemap.html in C:\HTML\Unit7\Hands On Folder in Internet Explorer.
• This HTML document illustrates how to Image Map works.• The output is shown in the next slide.
Hands-On!
Image Tag
• Three tags are used to create an Image map. They are:– <IMG> tag
• Src attribute to specify the image to be displayed
• Usemap attribute is used as a reference • value of the Usemap attribute should be
preceded by # symbol.
Image Tag
– <MAP> tag is used to convert different areas of the image into hyperlinks • Id attribute specifies the name of the
Image map • The names given in the Id attribute and
Usemap attribute should be same
Image Tag
– The <AREA> tag specifies area of the part of the image to be used as hyperlink • Shape attribute specifies the shape of the area to be
used as hyperlink.• Coords attribute specifies the coordinate values for
the shape.• Example:
<AREA Shape="Rect" Coords = "60,90,140,160" Alt="Ribs" Href="Ribs.html">
Lab Exercise
• Write a HTML code to display the output as given in the following Figure. When you clicked on the pond, a Web page should show the close-up view of the pond.
Background
• Images can also be added as background of a Web page.
• BACKGROUND attribute of the <BODY> tag is used to add image background.
• Example:
<BODY BACKGROUND=”Pinakki.jpg”>
Activity 2.7.2
• Create a Web page that explains how to add images as shown in Figure.
• Save the HTML file as Activity2.html in C:\HTML\Unit7\Activity folder.
• The Image hyperlink at the bottom of the page should be linked to Activity1.html.
Activity 2.7.2 Contd.
Summary
In this presentation, you learnt the following:• The concept of different parts of an Image
acting as hyperlink is called Image Map.• To add an image as a background instead of
colour, replace BGCOLOR with BACKGROUND attribute in the <BODY> tag.
Assignment
1. Name the tags and attributes to create an Image map.
2. How an image can be displayed as a background of a Web page?
top related