interactividad

Interactive images without frameworks or iframes

Why the future of interactive graphics doesn't require sluggish iframes or heavy JavaScript bundles.

Hover, clicks and transitions inside the image itself, without a framework or heavy iframes. This is how an interactive image responds to the cursor: the image describes how it reacts, and the viewer handles the movement.

Think of the last banner you saw on a website. If it did something when you moved the mouse over it, it was most likely not really an image, but a small application inside a box: it takes time to load,, and if it fails it leaves a blank gap.

For something as simple as a button growing a little when pointed at, or a detail appearing on click, we have accepted loading a lot of machinery.

The image describes how it responds

In OIM, the designer decides in the editor what each element does: this button grows when pointed at, that one shows a note on click, this text changes. That description travels inside the file itself, next to the image.

It is not a program. It is a list of reactions: "if this happens, do that". Each element has a rest state and another for when the cursor is over it or when it is pressed. The viewer reads that list and runs it with what the browser already knows how to do, so the movement is smooth and no foreign code is hidden in the image.

An example: the T-shirt that opens on click

Imagine the banner of a clothing shop. On the T-shirt there is a price tag. When the mouse passes over it, the tag grows a little. When it is clicked, the fabric details appear. And on the "Add to cart" button, the click does nothing inside the image: it tells the page.

The page's part is short. You listen for the image's event and decide what to do:

<oim-player id="banner" src="t-shirt.oim.png" lang="en"></oim-player>

<script>
  document.getElementById('banner').addEventListener('oim:action', (event) => {
    if (event.detail.name === 'add_to_cart') {
      event.preventDefault();
      // your cart logic goes here
    }
  });
</script>

The image does not know what a cart is. The shop does not need to know how the banner was built.

An image that behaves on any site

Because the image carries no programs, it can be embedded in a third-party website: its reactions are limited to showing, hiding or changing its own layers, and it runs no code of its own.

But it can signal. When the reader presses an element, the image announces "this thing was pressed", and the website that hosts it decides whether to act: open a product page, add to a cart, count the click. The image does not need to know anything about that website, and the website does not need to know how the image was made.

Light in practice

Each interactive image is just one more file, with its design and its list of reactions inside. And if someone opens it outside the website, on their computer, it is still a PNG that displays normally.

If a page has many images that do not need to move, you can turn animations off with disable-animations="true". And for readers who have reduced motion enabled on their system, the viewer can respect that too.

An image can respond to the reader without ceasing to be an image.

When the reaction starts

The activate-on attribute decides when animations start:

visible: when the image scrolls into view (the default).
hover: only when the cursor passes over it.
manual: only when the page calls play().

For example, a page with twenty branch maps can use visible: only the ones on screen animate and the rest wait. If a map sits in a hidden tab, manual lets you start it when the reader opens that tab.

What it does not do

An image with reactions does not replace an application. A form that validates data or a cart that calculates shipping still needs code on the page. The image only describes what happens inside it; the rest of the logic is still the page's job.

How to start

Create the reaction states in the OIM editor: rest, cursor over, and pressed.
Load the player and declare the image with mode="full", which enables animations and interactive states:

<script src="https://cdn.oim.media/player/v1/oim-player.js"></script>
<oim-player src="t-shirt.oim.png" lang="en" mode="full"></oim-player>

If you need to respond to clicks, listen for the oim:action event as in the example above.

The attribute reference is in the player guide and the first steps in the quick start.

Frequently asked questions

Do I need to code for an image to react?

For the movement, no. The designer defines the reactions in the editor. You only need code if you want the page to do something when the reader presses.

Does it work with the keyboard?

Yes. Interactive elements can be reached with the keyboard, and Enter or Space do the same as a click.

What about on a phone?

Pinch zoom is only enabled with allow-zoom="true".

What if the reader prefers less motion?

You can force the rest state with disable-animations="true". That stops the text ripples, the bounces and the rest of the movement, and leaves the image in its static state.