HTML media objects

HTML Images

• The Img implements HTML <img> tag.
• The Figure implements the <figure> tag.
  • The FigCaption implements the <figcaption> tag.
• The Picture implements the <picture> tag.

A Figure component consists of an Img component and an optional FigCaption component.

A Figure component specifies a self-contained content. While its content is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

PHP Example Code

Example result as HTML Flow

HTML <picture> tag

The Picture class is a flexibile way of specifying image resources. It implements the <picture> tag.

Usage: Instead of having one image that is scaled up or down based on the viewport width, multiple images can be used to more nicely fill the browser viewport.

PHP Example Code

Example result as HTML Flow

HTML Imagemap components

The <area> element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.

• The Map class implements a client-side image <map> element
  • The Area interface defines all <area> elements inside a <map> element.
  • The AbstractArea is the base implementation of all build-in Area components:
    • The Rectangle class implements a rectangular region
    • The Circle for a circular region
    • The Polygon for a polygonal region

PHP Example Code

Example result as HTML Flow

SVG Images

The Svg implements HTML <svg> tag.

square.svg