The image element displays an image in the room. The image can either be an asset in the space, or a remote URL.

Adding an image

Images can be selected using the Media URL property.

  1. Click on the pencil icon next to Media URL to select an asset from the asset library (or upload a new asset).

  2. Copy / paste a remote URL directly into the Media URL field to use a remote image.

You can also perform both operation on the URL property in the property grid.

It can be very useful to have Image elements link to other rooms - for example, you could have an image of door that leads to another room. To do this, you'll need to set the Linked Room property under the INTERACTION category:

Now, when a user clicks on the image, they will be navigated to the selected room.


  • Drag on Transparent Pixels: If the image is draggable and this property is set to true, then drags originating anywhere with in the image bounds will be accepted, even if the drag starts on a transparent pixel.

  • Link only on Non-Transparent Pixels: Similar to Drag on Transparent Pixels. When this property is set to true, and an image has a Link URL or Linked Room set, then the user must click on a non-transparent pixel in the image to trigger the navigation.


  • Jigsaw Image: Any image element can be converted into clicking the button for theJigsaw Image property in the right panel under the ACTIONS Category:

You'll be prompted to specify the number of rows and columns of jigsaw pieces you want to cut the image into. Once you've decided on the number of pieces, hit the Go button:

After a the jigsaw operation is complete, your room will have the jigsaw pieces, a puzzle border, and a reset button:

  • Segment Image: Similar to background segmentation, which allows a part of an image to be cut out and placed in a separate image element on top of the original. This is useful for cutting out foreground elements in an image to create a layering effect. E.g. by cutting out a foreground element, you can sandwich other ohyay elements between the original image element and the segment. Ohyay will automatically place the segment in a pixel-perfect manner on top of the original element.

Did this page help you?