Skip to main content

4. Imagen con puntos destacados / Image Hotspots

4. Imagen con puntos destacados (Image Hotspots)

Este tipo de contenido permite marcar diferentes puntos en una imagen para dar información sobre aspectos que queramos destacar en ella. 

Para comenzar a trabajar con esta herramienta, lo primero que haremos será ir al curso en el que queramos crear este contenido, y en el menú de la izquierda, pulsaremos el botón Banco de Contenido. Una vez en él, pulsaremos en el botón Agregar y en el desplegable seleccionaremos Image Hotspots.




Escribiremos el título del contenido y en Imagen de fondo, pulsaremos en el botón +Agregar para añadir la imagen sobre la que queremos marcar los puntos destacados.

Podemos definir además el Icono Hotspot que aparecerá en los puntos destacados de la imagen, pudiendo escoger entre los predefinidos de la herramienta o subir uno propio desde el ordenador. 

Entre los predefinidos podremos elegir entre una variedad de ellos: menos, más, veces, revisar, pregunta, información y exclamación.

Por último también podremos elegir el color de los puntos o hotspots

Una vez definidas estas opciones comunes para todos los puntos destacados, es el momento de ir creando cada uno de los hotspots en la imagen. 

Para añadir cada uno de ellos, clicamos sobre la imagen en el lugar en el que queramos poner el punto destacado. Si queremos una mayor precisión para clicar, disponemos de una lupa para ver la imagen más grande. 

 

 

En el apartado Contenido Emergente, al pulsar en el desplegable que hay debajo de Ítem del contenido, podremos elegir qué tipo de ítem queremos añadir: texto, vídeo o imagen. En función del que seleccionemos, los campos a completar serán diferentes. 

Una vez seleccionado el ítem que nos interesa, aparecerán varios campos para completar.  Así, por ejemplo, en el caso de haber elegido un ítem de vídeo, deberemos de pulsar en el rectángulo con el símbolo “+ para añadir un vídeo, ya sea subiéndolo desde el ordenador o bien pegando el enlace de la URL. 

Además podremos seleccionar entre varias opciones de visualización, reproducción o accesibilidad para el vídeo que añadamos. 

En este momento ya tendríamos configurado nuestro punto con un ítem. Sin embargo, resulta muy interesante la posibilidad de poder añadir más de un ítem a un mismo punto o hotspot. Para ello simplemente pulsaremos en el botón Añadir ítem y procederemos del mismo modo que acabamos de explicar, eligiendo entre texto, vídeo o imagen a añadir. 

Para continuar añadiendo nuevos puntos de interés o hotspot a nuestra imagen, pulsaremos sobre el botón azul AÑADIR HOTSPOT y volveremos a realizar los mismos pasos que acabamos de explicar con cada uno de los nuevos puntos que queramos señalar en la imagen.

Finalmente, cuando ya tengamos todos los puntos de interés o hotspot seleccionados y configurados, pulsaremos en el botón de Guardar y podremos visualizar el resultado del contenido diseñado. 

Para ver la imagen en pantalla completa se puede hacer pulsando sobre el icono que hay en la parte superior derecha de la imagen. 

image-1655217974227.png

Si queremos volver a editar algún parámetro, pulsaremos sobre el botón Editar y accederemos nuevamente a la configuración de nuestra Image Hotspots.

El contenido H5P Image Hotspots que hemos realizado se guarda en nuestro Banco de contenido y estará listo para usarse cuando queramos añadir una Nueva Actividad en nuestro Curso.

Añadir el contenido H5P a una Actividad

Ya hemos visto cómo realizar este proceso con el contenido H5P Agamotto, pero si necesitas volver a repasarlo, pincha AQUÍ.