# interactive-image

An interactive image has clickable links that can be used in various ways. For instance, it can be clicked on to reveal information about a specific point, indicate a selection, such as a booking, or use it as a multi-selection. This is typically used when the information you need to convey is better presented visually than in text.

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FgyEIj8rSV7tBeFvF7mIn%2FCC-interactiveImage.png?alt=media&#x26;token=e71938b9-b79b-4271-a522-549ad4249ec8" alt="Interactive images" width="563"><figcaption><p>Interactive images</p></figcaption></figure>

## Configuration options

Some properties are common to all components, see [Common component properties](https://docs.jigx.com/examples/readme/components/interactive-image) for a list and their configuration options.

<table><thead><tr><th width="138.734375">Core structure</th><th></th></tr></thead><tbody><tr><td><code>source</code></td><td>The image source can be a remote URL or a local file resource. This property can also contain several remote URLs, specified with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).</td></tr><tr><td><code>body</code></td><td>The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied.</td></tr><tr><td><code>bundle</code></td><td>The iOS asset bundle which the image is included in. This will default to [NSBundle mainBundle] if not set.</td></tr><tr><td><code>cache</code></td><td><p>A <code>cache</code> property can be added to control how networked requests interact with the local cache.</p><ul><li><code>default</code>: Use the native platforms default strategy.</li><li><code>useProtocolCachePolicy</code> on iOS.</li><li><code>force-cache</code>: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.</li><li><code>only-if-cached</code>: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.</li><li><code>reload</code>: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.</li></ul></td></tr><tr><td><code>headers</code></td><td>The object representing the HTTP headers to send along with the request for a remote image.</td></tr><tr><td><code>height</code></td><td>The height of the source.</td></tr><tr><td><code>method</code></td><td>The HTTP Method to use. Defaults to GET if not specified.</td></tr><tr><td><code>scale</code></td><td><code>scale</code> is used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.</td></tr><tr><td><code>uri</code></td><td>Uri for the image, can be string or Jigx expression.</td></tr><tr><td><code>width</code></td><td>The <code>width</code> and <code>height</code> can be specified if known at build time, in which case these will be used to set the default image component dimensions.</td></tr></tbody></table>

<table><thead><tr><th width="138.90234375">Other options</th><th></th></tr></thead><tbody><tr><td><code>data</code></td><td>Provide the x and y coordinates to be placed on the image.</td></tr><tr><td><code>groups</code></td><td>This property includes <code>title</code> and <code>id</code>, with the additional option of adding a <code>color</code> for your group and <code>maximumPoints</code>, which defines the maximum possible number of selected points. The <code>groups</code> property is used to specify certain groups to distinguish between selected/unselected and otherwise specified areas.</td></tr><tr><td><code>imageHeight</code></td><td>The height of the image is specific. If the height is bigger than the image ratio (width/height), the height is correlated based on the image dimensions.</td></tr><tr><td><code>item</code></td><td>There is only one available option, which is .</td></tr><tr><td><code>pointColor</code></td><td>The color of the point(s) marked on the image. The default color for point items is inactive state.</td></tr></tbody></table>

## Considerations

* The interactive component serves as a container for the [interactive-image-item](https://docs.jigx.com/examples/readme/components/interactive-image/interactive-image-item) component.
* The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline. For more details, refer to [Assets](https://docs.jigx.com/building-apps-with-jigx/ui/assets).