Images and Image Maps

Course topics by week
1. Intro to HTML 5	6. Page Layout with CSS
2. More on Creating Web Pages	7. HTML Tables
3. Site Design + More on Hyperlinks	8. HTML Forms
4. Design with CSS	9. Multimedia
5. Midterm	10. Term Project

Common Image FormatsBMP GIFJPEGPNGWebPImage MapsHotspot attributesComputer graphics coordinate systemFinding coordinates in an imageRectangular hotspotsCircular hotspotsPolygonal hotspotsDefault hotspotReference

Common Image Formats

BMP

The bitmap format is an uncompressed file format. This is not normally used on web pages because the files tend to be large. Bitmap files will have the extension .bmp.

GIF

The Graphic Interchange Format is used for uncompressed, animated images.

JPEG

Joint Photographic Experts Group is a lossy compression algorithm that is popular for compressing images to be used on the web because it can be used to make very small image files, but with loss of image quality. JPEG files will have the extensions .jpg, or .jpeg.

JPEG files may also be formatted using JFIF (Joint File Interchanging Format) and have the extensions .jfif or .jif.

PNG

Portable Network Graphics is a lossless compression algorithm that is also popular for images in web pages.

WebP

Web Picture is a newer type of compression algorithm that is becoming more popular for use on web pages. It offers better compression than JPEG or PNG, can be used for either lossless or lossy compression and for still or animated images.

Image Maps

Images can be divided into different zones, or hotspots, each linked to a different target destination.

To define hotspots, you create an image map that contains <area> elements that map specified regions of the image to specific web pages or locations.


x
<img src="plantation.png" width="650" height="525" alt="Coffee plantation" usemap="#farm">

<map name="farm">
  <area coords="380,60,500,270" shape="rect" href="beans.html" alt="A cup of coffee beans">
  <area shape="circle" coords="300,130,70" href="press.htm" alt="A french press">
  <area shape="polygon" coords="10,65,15,260,350,260,350,225,230,225,230,60" href="tree.htm" alt= "A coffee tree">
  <area shape="default" coords="0, 0, 650, 525" … />
</map>

Hotspot attributes

coords: coordinates (location) of the hotspot.
shape
href
alt

Computer graphics coordinate system

In two dimensional computer graphics, a cartesian coordinate system is used in which the x-axis starts at the left and extends to the right and the y-axis starts at the top and extends to the bottom.

2D computer graphics coordinate system

Image from Program Arcade Games with Python and PyGame

Finding coordinates in an image

You can use a photo editing program like Windows Paint, Gimp, or Photoshop (or Photoshop Elements) to find coordinates, or you can use an online service like the one shown in the reference section of these notes.

Rectangular hotspots

Two points define a rectangular hotspot: the upper-left corner the lower-right corner.


xxxxxxxxxx
<area coords="380,60,500,270" shape="rect" href="beans.html" alt="A cup of coffee beans">

Circular hotspots

A circular hotspot is defined by the location of its center and its radius.


xxxxxxxxxx
<area shape="circle" coords="300,130,70" href="press.htm" alt="A french press">

Polygonal hotspots

To create a polygonal hotspot, you enter the coordinates for each vertex in the shape.


xxxxxxxxxx
<area shape="polygon" coords="10,65,15,260,350,260,350,225,230,225,10,65" href="tree.htm" alt= "A coffee tree">

Default hotspot


xxxxxxxxxx
<area shape="default" href="plantation.html" alt="Our farm">

Where the first pair of numbers is always zero and the second pair are the width and height of the image in pixels.
Any spot that is not covered by another hotspot will activate the default hotspot link