Lesson 11: Images and Client-side Maps

 Signed in as:    
      Sign out



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends


This first video describes HTML's support for images and client-side maps:

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.


Lesson 11: Images and Client-side Maps

Click here for the video transcript


Hands on exercise

The exercise for this lesson is primarily concerned with displaying images and constructing client-side maps.

First, build a document called 'map_work.html': begin by opening 'html_skel' in your text editor and saving it as 'map_work.html'.

Set the title to something like 'Images and Maps'.

Add a paragraph of text about the image 'bld.jpg' and then include the image 'bld.jpg'; view this page.

Experiment with various width and height attributes to see the effect.

Add a map to divide the bld.jpg image into four quadrants using rectangle shapes. The image is 327 x 215 pixels. We have provided some target pages for the links:

    got2ul.html - for upper left corner
    got2ur.html - for upper right corner
    got2ll.html - for lower left corner
    got2lr.html - for lower right corner

Test this map works as expected.

Next, modify 'map_work.html': copy the paragraph and image of 'bld.jpg', but now create a new map over the image, one that uses circle shapes. Define one circle in the upper left section of the image and one in the lower right; they should not overlap. We have some more target pages for you to use:

    got2uc.html - for upper circle
    got2lc.html - for lower circle

Test this map works.

Optional: There are some animated gif images to play with if you wish:


There are some map files and target pages you can experiment with if you like:



Some text that uses these maps and pages, based on the lecture, is found in workmaps.html. This is not a complete document but may be copied and pasted into your own 'map_work.html" to experiment with.

Note: all maps are from (and it takes some poking around to find some of them.)


The video below is an optional video.It explores an some of the business models on the web, as well as raising concern about following copyright laws. It also describes two applications that I find useful:

* "Pixabay" as a source for images and
* "IrfanView" as a free application for working with images.


Bonus video: Tools and resources.

Click here for the video transcript



Supplemental materials

    A cumulative summary of the contents of the course so far: Click here


Hands on exercise (Optional)

Take a look at pixabay ( and get an idea of what's on their site.
Consider downloading and installing IrfanView (


 Lesson navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.