Monitor

Lesson 11: Images and Client-side Maps

 

Links

Your home page

Creating Websites home

Beginnings
   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
   Lists
   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
   Misc. topics
   Cookies
   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:

    cheetah.gif
    world_spinning_1.gif

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

    africa.gif
    asia.gif
    australasia.gif
    europe.gif
    Middle_East.gif
    North_America.gif
    South_America.gif
    world_continents.gif

    got2africa.html
    got2asia.html
    got2aust.html
    got2europe.html
    got2mideast.html
    got2northam.html
    got2southam.html

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 https://www.worldatlas.com/clipart.htm (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 application 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 (https://pixabay.com/) and get an idea of what's on their site.
Consider downloading and installing IrfanView (https://www.irfanview.com/).

 

 Lesson navigation 

 

 

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