Berlin - Componentes | Mapa de clics

Última modificación:


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

Image 7060

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.

Image 17842

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

Image 7061

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

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

Image 7062

  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..Image 7063
Posición de los panelesPropiedad 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 objetivoPermite 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
Enlace a popup

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

Enlace a recursoFichero 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 externoSi queremos enlazar una dirección web, en este campo indicaremos su correspondiente URL.
Enlace a panelCampo 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

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.

Image 17846

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


¿Le resulta útil este artículo?
© 2023 Netex Knowledge Factory. Todos los derechos reservados. Aviso Legal | Política de Privacidad | Política de Cookies.
-