Tokyo - Componentes | Lanzador

Última modificación:

El "Lanzador" es un componente que permite crear un botón interactivo, que cambia de estado al situar el ratón sobre él.

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


Existen dos vistas para este componente que se configuran de forma diferente: 

  1. Lanzador simple
  2. Lanzador avanzado

Configuración del lanzador simple

Para crear el efecto de botón interactivo, con el cambio de estado cuando se sitúa el ratón sobre él, utilizaremos dos imágenes (una que se verá por defecto y otra que se verá al hacer rollover). 

1. Debes establecer cuál será la imagen principal y cuál será la imagen que se mostrará en rollover. Para ello, en las propiedades "Recurso" y "Recurso (rollover)", pulsa "Examinar" para localizar y asociar una imagen de la carpeta de Recursos de la unidad (ver aquí).

2. Define qué sucederá al hacer clic sobre el botón. Para eso se pueden utilizar las propiedades "Enlace a popup", "Enlace a recurso" o "Enlace externo". Recuerda que son propiedades excluyentes, por lo que solo podrás utilizar una de las tres.

3. Opcionalmente, configura el resto de propiedades.


Propiedades del lanzador simple

PROPIEDADDESCRIPCIÓN
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.
RecursoFichero 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.
Recurso (roll over)Fichero de imagen que se visualizará al hacer rollover sobre el botón. 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.
Enlace a popupEnlaza el lanzador a un popup (Ver cómo crear y gestonar popups en el aquí ). Esta propiedad es excluyente con respecto a las propiedades "Enlace a recurso" y "Enlace externo", es decir, si se enlaza el lanzado a un popup, no podrá enlazarse al mismo tiempo a, por ejemplo, un recurso.
Enlace a recurso

Permite enlazar el lanzador a un fichero PDF o ZIP. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí ) y seleccionar en ella el fichero que se desea enlazar. Esta propiedad es excluyente con respecto a las propiedades "Enlace a popup" y "Enlace externo", es decir, si se enlaza a un recurso, no podrá enlazarse al mismo tiempo a, por ejemplo, un popup.

Enlace externoPermite enlazar el lanzador a una url. Esta propiedad es excluyente con respecto a las propiedades "Enlace a popup" y "Enlace a recurso", es decir, si se enlaza a una web no podrá enlazarse al mismo tiempo a, por ejemplo, un popup.
Enlace a pantallaPermite enlazar el lanzador a una pantalla de la misma página o de otra página. Así, se generan navegaciones personalizadas. 
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.
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.


Configuración del lanzador avanzado

El lanzador avanzado está diseñado para crear un botón interactivo pero permite añadir más elementos en su interior, creando un elemento más complejo. Así, se puede crear un lanzador que incorpore:

  • Un título. Es un texto al que podremos poner un color de fondo o una imagen de fondo.
  • Un texto descriptivo. A este texto podremos asignarle un color de fondo.
  • Una o varias imágenes. Podremos añadir varias imágenes, pudiendo decidir en cada una si todas tienen efecto rollover o solo lo tiene alguna de ellas, dejando el resto como imágenes fijas. 

Por lo tanto, podríamos crear un lanzador que tenga un título y una imagen con rollover; o un lanzador que tenga título, una descripción, una imagen fija y otra que realice el efecto de rollover; etc. 

Para configurar este lanzador avanzado: 

  1. Empezamos configurando las propiedades del lanzador. Aquí es obligatorio definir qué sucederá al pulsar sobre el lanzador, por lo que se debe elegir entre abrir un popup, link a un recurso o un link externo. Adicionalmente, este componente tiene las mismas propiedades comunes al lanzador simple, pero cuenta con otras propiedades específicas como decidir el Estilo de borde (con borde o con sombra) o el color del borde
  2. Añadimos los elementos que queremos que compongan el lanzador. Podemos añadir título, textos e imágenes.
  3. A continuación, configuraremos las propiedades de cada componente añadido:
    • Título: Se puede configurar un color de fondo y/o una imagen de fondo.
    • Texto: Permite configurar una sangría inicial, el estilo de las listas numeradas, color de las listas  y un color de fondo para el texto.
    • Imagen: Permite definir una imagen principal y/o una imagen de rollover que se mostrará al situar el ratón sobre el lanzador. Adicionalmente, podremos configurar el ancho de la imagen y su alineación.


Recuerda
El componente "Lanzador" resulta muy útil para crear menús de botones interactivos. Por ejemplo, aquí mostramos un grupo de 4 lanzadores, organizados en una fila que tiene 4 columnas, con un lanzador dentro de cada columna. Los lanzadores son imágenes de bombillas que, al hacer rollover sobre ellas, muestran una segunda imagen con la bombilla iluminada.


Para facilitar y hacer este tipo de menús de forma sencilla, existe una fila preconfigurada para crear este montaje. Revisa el aquí para ver cómo se crean las filas.




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