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 o páginas web).

Por defecto, se añade dentro de las secciones (Ver aquí) y los popups (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í ). Adicionalmente, se podrán configurar el resto de propiedades del Mapa de clics.

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.

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 "Pie de foto".

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.

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 Enlace a popup

Desde este campo seleccionamos el popup que se abrirá al hacer clic sobre cada una de las áreas.

Enlace a recurso Fichero de imagen que se visualizará. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí del manual de editor) y seleccionar en ella la imagen deseada. Se admiten imágenes con formato jpeg, png y gif. Enlace externo Si queremos enlazar una dirección web, en este campo indicaremos su correspondiente URL. Enlace a panel Campo solo disponible en lavista 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

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.

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