← Volver al blog
interactividad

Imágenes interactivas sin framework ni iframes

Por qué el futuro de los gráficos interactivos no requiere iframes lentos ni bundles pesados de JavaScript.

Hover, clics y transiciones dentro de la propia imagen, sin framework ni iframes pesados. Así se construye una imagen interactiva que responde al cursor: la imagen describe cómo reacciona y el visor se encarga del movimiento.

Piensa en el último banner que viste en una web. Si hacía algo al pasar el ratón por encima, lo más probable es que no fuera una imagen, sino una pequeña aplicación metida en un recuadro: tarda en cargar y, si falla, deja un hueco en blanco.

Para algo tan sencillo como que un botón crezca un poco al señalarlo, o que aparezca un detalle al hacer clic, hemos aceptado cargar mucha maquinaria.

La imagen describe cómo responde

En OIM, el diseñador decide en el editor qué hace cada elemento: este botón crece al señalarlo, este otro muestra una nota al hacer clic, este texto cambia. Esa descripción viaja dentro del propio archivo, junto a la imagen.

No es un programa. Es una lista de reacciones: «si pasa esto, haz aquello». Cada elemento tiene un estado de reposo y otro para cuando el cursor está encima o cuando se pulsa. El visor lee esa lista y la ejecuta con lo que el navegador ya sabe hacer, así que el movimiento es suave y no hay código ajeno escondido en la imagen.

Un ejemplo: la camiseta que se abre al hacer clic

Imagina el banner de una tienda de ropa. Sobre la camiseta hay una etiqueta con el precio. Al pasar el ratón, la etiqueta crece un poco. Al pulsarla, aparece el detalle de la tela. Y en el botón «Añadir al carrito», el clic no hace nada dentro de la imagen: avisa a la web.

La parte de la web es corta. Escuchas el evento de la imagen y decides qué hacer:

<oim-player id="banner" src="camiseta.oim.png" lang="es"></oim-player>

<script>
  document.getElementById('banner').addEventListener('oim:action', (event) => {
    if (event.detail.name === 'add_to_cart') {
      event.preventDefault();
      // aquí va tu lógica de carrito
    }
  });
</script>

La imagen no sabe qué es un carrito. La tienda tampoco necesita saber cómo está hecho el banner.

Una imagen que se sabe comportar en cualquier sitio

Como la imagen no lleva programas, se puede incrustar en una web de terceros: sus reacciones se limitan a mostrar, ocultar o cambiar sus propias capas, y no ejecuta código propio.

Pero sí puede avisar. Cuando el lector pulsa un elemento, la imagen anuncia «han pulsado tal cosa», y la web que la aloja decide si hacer algo: abrir una ficha, añadir al carrito, contar el clic. La imagen no necesita saber nada de esa web, y la web no necesita saber cómo se hizo la imagen.

Ligero de verdad

Cada imagen interactiva es solo un archivo más, con su diseño y su lista de reacciones dentro. Y si alguien la abre fuera de la web, en su ordenador, sigue siendo un PNG que se ve con normalidad.

Si una página tiene muchas imágenes y no necesitan moverse, puedes desactivar las animaciones con disable-animations="true". Y para quien tiene activado el movimiento reducido en su sistema, el visor puede respetarlo igual.

Una imagen puede responder al lector sin dejar de ser una imagen.

Cuándo se activa la reacción

El atributo activate-on decide cuándo empiezan las animaciones:

  • visible: al entrar en pantalla (el valor por defecto).
  • hover: solo cuando el cursor pasa por encima.
  • manual: solo cuando la página llama a play().

Por ejemplo, una página con veinte mapas de sucursales puede usar visible: solo se animan los que están en pantalla y el resto espera. Si un mapa va en una pestaña oculta, manual permite arrancarlo cuando el lector la abre.

Lo que no hace

Una imagen con reacciones no sustituye a una aplicación. Un formulario que valida datos o un carrito que calcula envíos siguen necesitando código en la web. La imagen solo describe lo que pasa dentro de ella; el resto de la lógica sigue siendo cosa de la página.

Cómo empezar

  1. Crea los estados de reacción en el editor de OIM: reposo, cursor encima y pulsado.
  2. Carga el player y declara la imagen con el modo full, que activa las animaciones y los estados interactivos:
<script src="https://cdn.oim.media/player/v1/oim-player.js"></script>
<oim-player src="camiseta.oim.png" lang="es" mode="full"></oim-player>
  1. Si necesitas responder a clics, escucha el evento oim:action como en el ejemplo anterior.

La referencia de atributos está en la guía del player y los pasos iniciales en el inicio rápido.

Preguntas frecuentes

¿Necesito programar para que una imagen reaccione?

Para el movimiento, no. El diseñador define las reacciones en el editor. Solo necesitas código si quieres que la web haga algo cuando el lector pulsa.

¿Funciona con teclado?

Sí. Los elementos interactivos se pueden alcanzar con el teclado, y Enter o Espacio hacen lo mismo que un clic.

¿Y en el móvil?

El zoom con gesto de pinza solo se activa con allow-zoom="true".

¿Qué pasa si el lector prefiere menos movimiento?

Puedes forzar el reposo con disable-animations="true". Eso detiene las ondas de texto, los rebotes y el resto de movimiento, y deja la imagen en su estado estático.

Otras lecturas