Componentes | Mapa de clics

El "Mapa de clics" es un componente que permite convertir una imagen en un elemento interactivo, añadiendo áreas clicables que pueden abrir distintos elementos (popups, documentos, páginas web o paneles).

Por defecto, se añade dentro de las pantallas (Ver aquí) aunque también se podrá añadir en el interior de otros componentes (por ejemplo, dentro de una fila, etc.).

Encontraremos este componente en el grupo de componentes "Imagen".

Proceso de configuración

1. Accede a la pestaña "Propiedades" del mapa de clics y, en la propiedad "Recurso", pulsa "Examinar"para localizar y asociar una imagen de la carpeta de Recursos de la unidad (ver aquí del Manual de Editor para ver cómo gestionar la carpeta de Recursos).

2. Elige el tipo de panel que deseas crear:

Estándar. Este tipo de mapa de clics permite añadir áreas que se podrán enlazar a popups, a documentos o a enlaces web.
Con paneles. Este tipo de mapa de clics permite enlazar las áreas con paneles, es decir, zonas de contenido que se muestran en la pantalla, evitando que se abran ventanas adicionales.

Revisa este breve vídeo para ver las diferencias entre ambos tipos:

3. Adicionalmente, se podrán configurar el resto de propiedades del Mapa de clics (ver propiedades en la tabla al final de este artículo)

4. Accede a la pestaña "Añadir" y añade tantas "Áreas" como se necesite. Las áreas, por defecto, se crean en la zona superior izquierda de la imagen. Se pueden mover y redimensionar para poder colocarlas en el sitio y al tamaño que deseemos.

5. Si has elegido un mapa de clics de tipo "Con Paneles", debes añadir el componente "Bloque de paneles". Después, en su interior, podrás añadir tantos paneles como necesites para asociar a las áreas. Al final de este artículo podrás revisar las propiedades del bloque de paneles y de los paneles. Dentro de los paneles se podrán añadir textos e imágenes.

6. Pulsa sobre cada "Área" y muévelas a la zona de la imagen que quieras y modifica su tamaño. Además, en sus propiedades, selecciona qué acción sucederá al pulsar sobre el área:

Si es un mapa de clics de tipo Estándar, podrás enlazarlas con "Enlace a popup", "Enlace a recurso" o "Enlace externo".
Si es un mapa de clics de tipo Con Paneles, podrás enlazarlas con "Enlace a panel".

7. Además, también podrás configurar el contorno, la posición y el tamaño de las áreas clicables (ver lista de propiedades al final).

8. Para terminar, selecciona el Mapa de clics y, en la pestaña "Añadir", verás que puedes añadir opcionalmente el componente "Instrucción" o un "Pie de foto".

Recuerda:La instrucción solo se puede añadir en el mapa de tipo "Estándar". Si añades una instrucción, en sus propiedades podrás definir si es una instrucción estándar o con color de fondo.

Propiedades del Mapa de Clics

PROPIEDAD DESCRIPCIÓN Vista Permite seleccionar el tipo de mapa de clics que se desea crear:
- Estándar. Permitirá enlazar las áreas con un popup, un documento o una web.
- Con paneles. Permitirá enlazar las áreas a paneles. Estilo Propiedad solo disponible en la vista "Mapa de clics con paneles".
Permite decidir el estilo o posición de los paneles:
- Horizontal: se situarán debajo de la imagen.
- Vertical: se situarán al lado de la imagen. Recurso

Fichero de imagen que se visualizará. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí ) y seleccionar en ella la imagen deseada. Se admiten imágenes con formato jpeg, png y gif.

Título Título que se desea dar al Mapa de clics. Opcional Texto alternativo Texto descriptivo del lanzador. Se mostrará cuando el usuario sitúe el ratón sobre él o, en caso de que éste no se cargue, se verá este texto en su lugar. Ancho

Permite modificar el espacio que ocupa el componente dentro de la columna central de contenidos. Por defecto, ocupa el 100% del espacio disponible, pero puede reducirse utilizando otros porcentajes predefinidos o puede disponerse a "full-size". En algunos estilos de las citas, el tamaño "Full" hace que ésta sobrepase al ancho de la columna central.

Alinear Permite situar el componente alineado a la derecha, a la izquierda o al centro de la columna central de contenidos. Solo tiene efecto cuando aplicamos un "Ancho" menor al 100%. Flotar

Permite que el componente quede "enmarcado" en torno a un texto.

Primero, en la propiedad "Ancho", marcamos un tamaño menor al 100% (por ejemplo, el 25%).
En la propiedad "Flotar" decidimos en qué posición queremos que quede flotado el componente (a la izquierda o la derecha del texto).
Movemos el componente con sus flechas para colocarlo sobre el texto.

Botones visibles

Permite elegir si queremos que se muestre un botón clicable o no. Si se hace visible, aparecerá un icono sobre la imagen indicando el área clicable.

Botones animados

Este campo solo se activa si la propiedad "Botones visibles" está a "Sí".

Haciendo clic en "Sí" el botón realizará una pequeña animación llamando la atención del usuario.

Fondo de área visible Permite definir si queremos que el fondo del área sea visible o no. Por ejemplo, resultará útil poder ocultar el fondo del área clicable si hemos activado el botón. Borde del área visible. Permite establecer un borde visible al área para poder marcarla mejor. Posición de la instrucción. Permite situar la instrucción en la zona superior o inferior del mapa de clics. Posición de los paneles Propiedad solo disponible en la vista "Mapa de clics con paneles".
Permite decidir en qué posición se dispondrán los paneles, según lo que se haya elegido en la propiedad "Estilo":
- Zona superior/Izquierda: Si tiene estilo Horizontal, los paneles se situarán sobre la imagen. Si tiene estilo Vertical, se situarán a su izquierda.
- Zona inferior/Derecha: Si tiene estilo Horizontal, los paneles se situarán bajo la imagen. Si tiene estilo Vertical, se situarán a su derecha. Superar objetivo

Permite modificar la configuración de la superación de objetivos de este componente concreto, haciendo que se comporte de forma diferente a la configuración general establecida. Podemos elegir entre:

Heredado: aplica el valor por defecto que se haya definido en la zona de configuración de objetivos de la unidad (Ver aquí).
No es objetivo: el componente no será un objetivo a superar para finalizar la unidad.
Interactuar: es necesario interactuar con el componente para superar el objetivo.
Completar: es necesario pulsar sobre todas las áreas existentes en el mapa de clics para superar el objetivo,

Propiedades del área clicable

PROPIEDAD DESCRIPCIÓN Estilo Solo resulta útil si en el mapa de clics hemos marcado la propiedad "Botones visibles" a "Sí."
Permite decidir dos aspectos distintos para el área:
1. Área con icono animado. Muestra un círculo, que se podrá animar o no con la propiedad del mapa de clics "Botones animados".
2. Área con icono estático.Muestra un icono fijo, no animado.

Enlace a popup
Enlace a tooltip
Enlace a recurso
Enlace externo

Campos solo disponibles en la vista de mapa de clics "Estándar".

Permite enlazar el área con un popup, un tooltip, un recurso (p. ej., un pdf) o una página web. Solo se permite elegir una de las 3 opciones.

Enlace a panel

Campo solo disponible en la vista de mapa de clics "Con paneles".

Permite decidir qué panel se abrirá al seleccionar el área.

Título

Título que se desea dar al Mapa de clics. Opcional

Color Permite aplicar color personalizado al área y/o su borde, según la configuración de visualización elegida. Color del icono animado Permite personalizar el color del icono animado asociado al área. Contorno Permite elegir la forma del contorno del área. Hay tres formas disponibles: eclipse, rectángulo y rectángulo con los bordes redondeados.

Posición icono (área visitada)

Permite elegir la posición en pantalla del icono de área visitada. Hay cinco posiciones disponibles: superior izquierda y derecha, inferior izquierda y derecha y centro.

Posición X (px) Posición en horizontal de inicio del área clicable. La posición se indica en pixeles. Posición Y (px) Posición en vertical del inicio del área clicable. La posición se indica en pixeles. Ancho Permite definir el ancho del área clicable. Se indica en píxeles. Alto Permite definir el alto del área clicable. Se indica en píxeles.

Propiedades del bloque de paneles

PROPIEDADES DESCRIPCIÓN Color de fondo Permite definir el color de fondo de la zona de instrucción. Color del icono Define el color del icono de la instrucción Color de fuente Establece el color del texto de la instrucción.

Propiedades de los paneles

PROPIEDADES DESCRIPCIÓN Título Título del panel. Es importante darle un nombre para poder reconocer el panel a la hora de enlazarlo con el área correspondiente. Color de fondo Color de fondo del panel. Opacidad del color de fondo Se puede definir una opacidad del color para hacerlo más o menos transparente. Será útil si, además añadimos una imagen png con trasparencia. Imagen de fondo Se puede sustituir el color de fondo por una imagen de fondo.