Using image mapping and sound files – lesson plan

QCA Unit ICT at KS 3, Unit : Using ICT to Create a Website. Using image mapping and sound files.
Year Group Year 8 Number in class 30
Time for lesson 1 hour No. of computers 15 (minimum).


1.1a Using a range of ICT tools in a purposeful way to tackle questions, solve problems and create ideas and solutions of value.

1.1b Exploring and using new ICT tools as they become available.

1.1.c Applying ICT learning in a range of contexts ad in other areas of learning, work and life.

2.1a Consider systematically the information needed to solve a problem, complete a task or answer a question, and explore how it will be used.

2.1c Collect and enter quantitative and qualitative information, checking its accuracy.

2.2c Test predictions and discover patterns and relationships, exploring, evaluating and developing models by changing their rules and values.

2.2d Design information systems and suggest improvements to existing systems.

2.2e Use ICT to make things happen by planning, testing and modifying a sequence of instructions, recognising where a group of instructions needs repeating, and automating frequently used processes by constructing efficient procedures that are fit for purpose.

Aims/Learning Outcomes:

All:. Continue designing an effective website, incorporating the necessary features, i.e. text, image and sound programmes. Develop an awareness of the priorities for different kinds of content, and the associated technical challenges. Continue to learn the technical aspects of importing, integrating and synchronising the elements of a website in a creative manner, i.e. image mapping.

Most. As above, and design more advanced solutions to web-based design and communication problems.

Some: As above, and design more advanced solutions to web-based design and communication problems. Create links to other websites using image mapping.

Keywords: image mapping.

Resources: Notepad web page software or similar (as available). Prompt sheets featuring the command instructions for image mapping, or load these onto a factsheet in the shared public folder of the network for retrieval by the class.

Differentiation: By learning outcome, and differentiated tasks activities. Group work at different levels where the tasks are simplified/extended in terms of content and/or language for specific groups. Those in this class who are in lower ability Literacy groups to be aided by teaching support staff as available.

1. Introduction. Using the interactive whiteboard, explain that the class are going to continue with their website designs, incorporating more features, i.e. Image Mapping, which is the web page equivalent of hyperlinks. Image Maps allow you to place ‘hot spots’ on your web page, linking to other web pages in the same way as a hyperlink. To insert an Image Map, you will need to use the following series of commands.

This example uses three coloured rectangles, blue, green and red, as the shapes to be inserted.

<img src= “Example Image” usemap= “map”>

<map name= “map”>

<area shape= “rectangle” cords “000,00,00” href= “blue.thm” alt= “Blue Rectangle”>

<area shape= “rectangle” cords “000,00,00” href= “green.thm” alt= “Green Rectangle”>

<area shape= “rectangle” cords “000,00,00” href= “red.thm” alt= “Red Rectangle”>


Note: the abbreviation ‘coords’ stands for coordinates, which would be inserted into the command where the “000,00,00” entries are in the examples.

In Notebook, coordinates need to be entered in order to position the hotspot/link. The coordinates may be found by opening you image or picture in Microsoft Photo Editor, Paint, or a similar programme. When the cursor is hovered over the image, the coordinates will appear in the menu bar.

When these codes are entered in the command sequences above, they will position the areas that will form the hyperlinks. In each sequence, the fist two numbers position the centre of the hotspot, whilst the third gives the dimensions of the area as a whole. The link destination i.e. the page that appears when the hotspot is clicked, is represented by the href.

The href command may also be used to create conventional hyperlinks by using the following code, <A HREF= “filename.html”> Link to my other Web Page</A>

Adding sound. Sound may be added to you web page design in various formats, including Mp3, Wav, WMA, and Midi (.mid).

Notebook codes may be used to include sound in the following ways,

To play a Midi (.mid) file by clicking on a sound button or icon, <a href= “?????mid”>midi sound</a>

To play a Wave (.wav) file clicking on a sound button or icon, <a href= “?????wav”>wave sound</a>

To play sound when a page is opened, <bgsound src= “???.wav “loop= “ enter a number”

Main Task. In pairs, the class will retrieve their saved web page drafts and insert an Image Map and sound file into their design, using the instructions given in the introduction.

Plenary. Review the revised draft web pages and ask each pair in turn to present their version, concentrating on the Image Map and sound file functions. Ask the whole class to comment constructively on what they have heard and seen. Use the class list of best practice in website design (compiled in earlier sessions) as a guide for constructive criticism.

Relevant NC Level Descriptors.

For assessment purposes, successful completion of this lesson will enable pupils to achieve the following aspects of the ICT National Curriculum Level Descriptors.

Level 3.

Pupils use ICT to save information and to find and use appropriate stored information, following straightforward lines of enquiry. They use ICT to generate, develop, organise and present their work. This requirement will be met by the further use of web building software to develop their own web page design by adding Image Maps and sound files.

They share and exchange their ideas with others. They use sequences of instructions to…achieve specific outcomes. This requirement will be met through working in pairs and in group/class discussions about best practice in respect of the development of their revised web page drafts.

They make appropriate choices when using ICT based models or simulations to help them find things out and solve problems. They describe their use of ICT and its use outside school. This will be achieved through the use of progressively more complex web page building commands to meet their own design requirements in the areas of Image Mapping and sound files.

Level 4.

Pupils add to, amend and combine different forms of information from a variety of sources. They use ICT to present information in different forms and show they are aware of the intended audience and the need for quality in their presentations. This requirement will be met by achievement of this lesson’s objectives, i.e. the integration of links and sound in an initial website design, and logical application of commands.

Level 5

Pupils select the information they need for different purposes, check its accuracy and organise it in a form suitable for processing. They use ICT to structure, refine and present information in different forms and styles for specific purposes and audiences. This requirement could be met by the selection of data for different kinds of presentation within web page designs.

Originally published on: