Images and maps | Still Plugging Away

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

Images (using <img> elements)
Related attributes: src, alt, usemap, width, height
Placement of images (using float and clear style properties)
Client-side maps (using <map> and <area> elements)
Related attributes: name, shape, coords, href

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

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

Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.