M02 un07 p02
Download as PPT, PDF0 likes361 views
This document discusses adding images to web pages in different ways: 1) Image maps allow different parts of an image to act as hyperlinks using the <IMG>, <MAP>, and <AREA> tags. 2) Images can be added as the background of a web page using the BACKGROUND attribute of the <BODY> tag. 3) Hands-on activities guide the creation of web pages that demonstrate image maps and background images.
M02 un07 p02
- 1. Unit 7 – Images Presentation 2 Web Programming
- 2. 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
- 3. Image Map Different parts of an image can also be used as hyperlinks. This is known as Image Map
- 4. 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.
- 5. Hands-On!
- 6. 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.
- 7. 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
- 8. 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">
- 9. 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.
- 10. 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”>
- 11. 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.
- 13. 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.
- 14. Assignment Name the tags and attributes to create an Image map. How an image can be displayed as a background of a Web page?