Tokyo - 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

PROPIEDADDESCRIPCIÓN
VistaPermite 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. 
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ítuloTítulo que se desea dar al Mapa de clics. Opcional
Texto alternativoTexto 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.

AlinearPermite 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.

  1. Primero, en la propiedad "Ancho", marcamos un tamaño menor al 100% (por ejemplo, el 25%).
  2. En la propiedad "Flotar" decidimos en qué posición queremos que quede flotado el componente (a la izquierda o la derecha del texto).
  3. 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 visiblePermite 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. 
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

PROPIEDADDESCRIPCIÓN
EstiloSolo 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 recurso
Enlace externo

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

Permite enlazar el área con un popup, 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

ContornoPermite 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.
AnchoPermite definir el ancho del área clicable. Se indica en píxeles.
AltoPermite definir el alto del área clicable. Se indica en píxeles.

Propiedades del bloque de paneles

PROPIEDADESDESCRIPCIÓN
Color de fondoPermite definir el color de fondo de la zona de instrucción. 
Color del iconoDefine el color del icono de la instrucción
Color de fuenteEstablece el color del texto de la instrucción. 

Propiedades de los paneles

PROPIEDADESDESCRIPCIÓN
TítuloTítulo del panel. Es importante darle un nombre para poder reconocer el panel a la hora de enlazarlo con el área correspondiente.
Color de fondoColor de fondo del panel. 
Opacidad del color de fondoSe 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 fondoSe puede sustituir el color de fondo por una imagen de fondo.