Table of Contents

Images

Overview

Image is the name used to describe an element that displays a saved.

To add an Image element, go to Base Types > Image and add it to the canvas.

Type of Data Stored

An Image stores no data and has no state (unchecked / checked, populated, etc).

Attributes

Attribute Description
src

This attribute is the URL of the image that should be displayed.

The URL should contain the http:// or https:// part of the URL. Depending on the server that is hosting the image, you may run into the following situations:

  1. The server may require the subdomain to be included, even if it is only www.

  2. The server may not allowed
title This optional attribute defines a title for an image. The text provided will become a hovertip for the image, as well as used by screen readers to indicate what the image contains.
onclick

This attribute is used to open a new tab to an external website when this element is clicked.

The value of this attribute should be set to the following code, replacing <URL> with the URL of the target page, while keeping the quotation marks (“).

window.open(“<URL>”);

The URL should contain the https:// part of the URL, or unexpected behaviour may occur.
style

Styling an Image element can be done using CSS in the style attribute.

Common styles used on Images include:

  1. border / border-(top/bottom/right/left) : A series of 3 properties that define a border that will appear around a container. A very common use of this style is border: 1px solid black.

  2. opacity: An property with a value of 0 to 1, where 0 is completely transparent and 1 is opaque.

  3. cursor: If an Image is going to link to another page outside of clevr using the onclick attribute, this style should be set to the value “pointer”, which will change the cursor to indicate that the image is clickable.