DocumentaciónGuía de Dynamic Media Classic

Crear mapas de imagen creating-image-maps

Last update: Thu Apr 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Intermediate
  • User

Un mapa de imagen es una región de una imagen, una página de catálogo electrónico o una imagen de un conjunto de giros que muestra un panel de rollover con texto. Cuando el usuario selecciona un mapa de imagen, se activa un tipo de acción. Por ejemplo, se abre una página web para que el usuario pueda obtener más información sobre un producto. Aparece un contorno alrededor de un mapa de imagen cuando el usuario mueve el puntero sobre él.

Además de la capacidad de crear mapas de imagen en Adobe Dynamic Media Classic, también puede crear mapas de imagen al diseñar un catálogo en Adobe Acrobat o Adobe InDesign.

Al crear mapas de imagen, puede realizar una de las siguientes acciones:

  • Introducir texto de rollover.
  • Introducir JavaScript y URL para abrir páginas web.
  • Crear plantillas URL para mapas de imagen.
  • Copiar mapas de imagen en otras imágenes, páginas de catálogo electrónico o conjuntos de giro.
  • Exportar mapas de imagen a CSV o XML.
  • Importe metadatos de imagen desde un archivo delimitado por tabuladores o desde un archivo XML.
  • Definir otras acciones determinadas por el consorcio World Wide Web.
  • Obtener una vista previa de mapas de imagen.

Dibujo y ajuste de un mapa de imagen drawing-and-adjusting-an-image-map

  1. Realice una de las siguientes acciones:

    • Si está trabajando con una imagen en la vista de cuadrícula o en la vista de lista, en la lista desplegable Editar seleccione Mapa de imagen. O bien, ábralo en Vista de detalles y, a continuación, seleccione Mapa de imagen encima de la imagen.
    • Si está trabajando con un conjunto de giros en la vista de cuadrícula o de lista, seleccione Editar. O bien, ábralo en Vista de detalles y, a continuación, seleccione Editar. Seleccione un recurso de imagen y, a continuación, seleccione Mapa de imagen.
    • Si está trabajando con un catálogo electrónico, en las vistas Cuadrícula, Lista, Detalle, seleccione Editar. Seleccione el Páginas de mapa pestaña.

    Imagen de mapa de imagen

  2. Dibuje un mapa de imagen rectangular o poligonal (de varios lados):

    • Mapa rectangular - Seleccione la herramienta Mapa de imagen rectangular y arrastre en la página para crear el rectángulo. Para añadir un punto a un mapa rectangular (convirtiéndolo así en un mapa poligonal), pulse Ctrl, coloque la herramienta de inserción en la ubicación deseada y seleccione.

    • Mapa poligonal - Seleccione la herramienta Mapa de imagen poligonal y seleccione puntos en el perímetro del área de la imagen que desea incluir. Use el control deslizante de densidad del polígono para modificar la densidad de punto del polígono. Se recuerda la densidad original al seleccionar otros mapas. Si se añade, elimina o mueve cualquier punto del polígono, se pierde la densidad original y se restablece el valor máximo del control deslizante.

  3. Si lo desea, asigne un nombre al mapa de imagen en la lista de mapas de imagen. Después de dibujar un mapa de imagen, Adobe Dynamic Media Classic le asigna un nombre.

    Para crear el nombre, Adobe Dynamic Media Classic añade un número secuencial al nombre de la imagen o página de catálogo electrónico con la que está trabajando. Puede introducir el nombre que desee.

  4. Si desea que los usuarios abran una nueva página web al seleccionar el mapa de imagen, introduzca la URL en la lista de mapa de imagen.

    Consulte para introducir JavaScript y URL.

  5. Para mostrar texto de rollover cuando los usuarios muevan el puntero sobre el mapa de imagen, introduzca el texto en la lista Mapa de imagen. En la lista Mapa de imagen, seleccione Mostrar y seleccione Texto de rollover. A continuación, escriba el texto que desea que los usuarios vean en pantalla. Puede escribir el texto en un procesador de textos y copiarlo en el campo Texto de rollover.

  6. Si desea que se produzca otra acción cuando los usuarios muevan el ratón sobre un mapa de imagen, defina la acción. En el Mostrar , seleccione la opción Otras acciones. Introduzca los atributos de la acción. (Vaya a Mostrar > Ambos para crear texto de rollover y una acción para un mapa de imagen).

    Consulte Definir otras acciones para los mapas de imagen.

  7. (Opcional) Lleve a cabo uno de los procedimientos siguientes:

    • Para previsualizar los mapas de imagen, seleccione Previsualizar.
    • Para eliminar un vértice de polígono o un mapa de imagen, seleccione una forma de la imagen y, a continuación, seleccione Eliminar. O bien, para un catálogo electrónico, en la ficha Ordenar páginas, seleccione Borrar asignaciones para eliminar los mapas de imagen de todas las páginas.
    • Para quitar temporalmente un mapa de imagen de una imagen, una imagen de un conjunto de giros o una página del catálogo electrónico sin eliminarla, anule la selección de la opción Activado correspondiente en la lista Mapa de imagen.

  8. Seleccionar Guardar.

Ajustar la posición, la forma y el tamaño de los mapas de imagen adjusting-the-position-shape-and-size-of-image-maps

Para cambiar la posición, la forma y el tamaño de un mapa de imagen, seleccione el botón Mapa de imagen. A continuación, seleccione la Panorámica y siga estas instrucciones:

  • Cambiar posición - Mueva el puntero cerca del borde del mapa de imagen, pero no sobre él. Cuando vea el icono de flecha con cuatro puntas, arrastre el mapa a una nueva ubicación.

  • Cambiar el tamaño y la forma - La forma de cambiar la forma y el tamaño de un mapa de imagen depende de si está trabajando con un mapa de imagen rectangular o poligonal:

TIP
Puede arrastrar el control deslizante Tamaño en la parte inferior de la pantalla para cambiar de vista y visualizar mejor el mapa de imagen.

  • Mapa de imagen rectangular - Mueva el puntero sobre un lado o una esquina del mapa de imagen. Al ver el icono de flecha con dos puntas, comience a arrastrar. Mantenga pulsada la tecla Mayús mientras arrastra para cambiar el tamaño pero manteniendo la proporción de aspecto (la forma).

  • Mapa de imagen poligonal - Arrastre un controlador de selección cuadrado. Para crear un controlador de selección, seleccione el borde del mapa de imagen y comience a arrastrar.

Gestión de mapas de imagen superpuestos handling-overlapping-image-maps

Si la imagen o página de catálogo electrónico incluye más de un mapa de imagen y estos se superponen, puede determinar cómo lo hacen. Para ello, cambie el orden de los mapas en la lista de mapas de imagen. Arrastre sus nombres hacia la parte superior o inferior de la lista. La posición de un nombre en la lista determina si su mapa de imagen se superpone sobre otros.

Importación de datos de mapa de imagen importing-image-map-data

En lugar de introducir datos de mapa de imagen en cada página, puede importar los datos de su conjunto de giros o catálogo electrónico desde la pantalla Resumen de mapas. Los datos de mapa de imagen se importan como un archivo delimitado por tabuladores o DTD de XML. Los campos del archivo deben tener el orden que se muestra en la pantalla Resumen de mapas: Nombre, Etiquetas de tabla de contenido, Mapas, Direcciones URL, Texto de rollover, Otras acciones y Cadenas de búsqueda. Si importa los datos de mapa de imagen, no tendrá que introducir los datos en la lista de mapas de imagen cada vez que crea un mapa de imagen.

Para importar datos de mapa de imagen:

  1. Vaya a la página del editor Mapa de imagen (para las imágenes o imágenes de los conjuntos de giros) o a la ficha Páginas de mapa de la pantalla de edición del catálogo electrónico.
  2. Seleccionar Importar metadatos.
  3. En el cuadro de diálogo Cargar metadatos, seleccione Imagen o Mapa de imagen para cargar los metadatos del tipo de propiedad de recurso deseado.
  4. En el Generate File , seleccione el tipo de archivo que desea crear.
  5. (Opcional) Seleccione Generar para obtener una vista previa de los datos resultantes en función del tipo de archivo que desee crear. Seleccionar Cerrar para volver al cuadro de diálogo Cargar metadatos.
  6. Busque el archivo que desea cargar. En el campo de texto Nombre del archivo, especifique el nombre del archivo generado.
  7. (Opcional) En el campo Nombre del trabajo, especifique un nombre para el trabajo de carga de metadatos.
  8. Seleccionar Cargar.

Copiar mapas de imagen copying-image-maps

Puede copiar mapas de imagen de una imagen o página de catálogo electrónico a otra. Uso Copiar mapa de imagen para empezar a crearlos con ventaja. También puede copiar mapas de imagen para volver a crearlos en imágenes o páginas que compartan diseño o estructura de asignación.

Por ejemplo, copiar mapas de imagen en un catálogo electrónico es una forma cómoda de copiar todos los mapas de imagen entre las versiones en distintos idiomas del mismo catálogo electrónico. Para obtener los mejores resultados, la copia es más eficaz si se realiza entre catálogos electrónicos que tengan el mismo número de páginas y las mismas imágenes. Si el catálogo electrónico al que copia ya contiene mapas de imágenes, estos se eliminan cuando se realiza la copia.

Para copiar mapas de imagen:

  1. Vaya a la página del editor Mapa de imagen (para las imágenes o imágenes de los conjuntos de giros) o a la ficha Páginas de mapa de la pantalla de edición del catálogo electrónico.

  2. Seleccionar Copiar asignaciones en.

  3. Realice una de las acciones siguientes, dependiendo de si está copiando los mapas de imagen desde imágenes o desde un catálogo electrónico:

    • (Imágenes) En la pantalla Seleccionar imágenes, seleccione las imágenes a las que desea copiar los mapas de imagen.
    • (Catálogo electrónico) En la pantalla Seleccionar recurso, seleccione las imágenes o las páginas del catálogo electrónico a las que desea copiar los mapas de imagen.

  4. Elegir Seleccionar.

Utilice una plantilla para introducir JavaScript y direcciones URL using-a-template-to-enter-javascript-and-urls

Puede definir una plantilla URL (conocida también como plantilla Href) para introducir direcciones URL de mapa de imagen con mayor facilidad y eficiencia. Defina una plantilla URL si la mayoría de las URL de mapa de imagen comparten un formato común, fijo. Al introducir la parte de la URL que es fija como plantilla de URL, no tiene que introducir esta parte de la URL cada vez que cree un mapa de imagen. La plantilla URL también puede contener comandos JavaScript, nombres de ruta y parámetros. De forma predeterminada, la plantilla URL contiene un controlador JavaScript de Adobe Dynamic Media Classic propiedad de llamado loadProduct que abre la imagen en una nueva ventana.

NOTE
Cuando se agrega el código JavaScript al atributo HREF del mapa de imagen, el código se ejecuta en el equipo cliente. Por lo tanto, asegúrese de que el código JavaScript sea seguro.

Acerca de las plantillas URL about-url-templates

La plantilla URL funciona sustituyendo el contenido de la columna URL en la lista de mapa de imagen por los signos de dólar dobles ('$$') en la plantilla:

Javascript:loadProduct('$$');void(0);

En la plantilla URL se colocan todos los valores que no cambian entre Mapas de imagen. Agregue solo los valores que no cambien en la columna URL en la lista de mapas de imagen. Por ejemplo:

  • Plantilla de URL - javascript:loadProduct('https://www.examplesitehere.com/$$');void(0);
  • Valor de URL - product.htm
  • URL real generada - javascript:loadProduct('https://www.examplesitehere.com/product.html);void(0);

De forma predeterminada, la plantilla de URL incluye un controlador JavaScript de Adobe Dynamic Media Classic propiedad de llamado loadProduct que abre una nueva ventana con el destino URL. Sin embargo, puede utilizar cualquier código JavaScript para reemplazar este controlador JavaScript o utilizar uno de los siguientes controladores Adobe Dynamic Media Classic:

  • loadProductCW : Muestra el destino de URL especificado en la columna URL de la ventana actual. Este controlador es fundamentalmente para catálogos electrónicos que se integran en una página dentro de un sitio Web.

  • loadProductPW : Muestra el destino de URL especificado en la columna URL de la ventana principal (la página que abrió la actual). La ventana activa permanece abierta, pero la principal cambia para mostrar el destino URL.

    note note
    NOTE
    El controlador loadProductPW no es compatible con visores DHTML y HTML 5.

Creación de una plantilla de URL creating-a-url-template

  1. En la pantalla Editor de mapas (imágenes o conjuntos de giros) o la ficha Páginas de mapa de la pantalla Catálogo electrónico (catálogos electrónicos), seleccione Editar, junto a la opción Plantilla URL. Se abrirá el cuadro de diálogo Editar la plantilla del mapa.
  2. Introduzca el código JavaScript y la dirección URL completa (con la parte de la variable reemplazada por signos de dólar) [$$]). Puede pegar el código haciendo clic con el botón derecho y eligiendo Pegar.
  3. Seleccionar Guardar.

Administrar plantillas de URL handling-url-templates

La página Editor de mapas (imágenes y conjuntos de giros) y la ficha Páginas de mapa de la pantalla Catálogo electrónico (catálogos electrónicos) ofrecen los siguientes comandos para el trabajo con plantillas URL:

  • Opción de plantilla URL : seleccione la opción Plantilla URL para aplicar la plantilla URL a todos los mapas de imágenes de una imagen o página de catálogo electrónico.

  • Opción de plantilla - Anule la selección de una opción de plantilla en la lista Mapa de imágenes de URL si no desea que un mapa de imágenes individual utilice la plantilla URL.

Definir otras acciones para los mapas de imagen defining-other-actions-for-image-maps

Puede seleccionar el Mostrar y elija Otras acciones para almacenar en déclencheur acciones que no sean texto de rollover y lanzamientos de páginas web. Cuando el usuario mueve el puntero sobre un mapa de imagen, se puede iniciar una acción. Estas acciones son atributos definidos para mapas de imagen de la parte del cliente acorde con las especificaciones del lenguaje HTML del consorcio World Wide Web. Incluyen:

  • accesskey - Déclencheur una acción cuando el usuario presiona una tecla designada en el teclado.

  • onfocus - Déclencheur un evento cuando el mapa de imagen recibe el enfoque: por el cursor, por tabulación o pulsando una tecla de acceso. Por ejemplo, puede abrir una página web cuando el mapa de imagen recibe atención y cerrarla cuando pierde dicha atención.

  • onblur : Déclencheur un evento cuando el mapa de imagen pierde Focus, ya sea por el cursor o por tabulación.

Para definir otras acciones para los mapas de imagen:

  1. En la pantalla Editor de mapas (imágenes y conjuntos de giros) o en la pestaña Páginas de mapas de la pantalla Catálogo electrónico (catálogos electrónicos), seleccione la opción Mostrar y seleccione Otras acciones.
  2. Mediante la sintaxis del lenguaje HTML del consorcio World Wide Web, agregue los atributos admitidos en la columna Otras acciones de la lista de mapas de imagen.
  3. Seleccionar Guardar.

Seleccione el Mostrar y seleccione Ambos si desea que un mapa de imagen tenga texto de rollover y una acción.

Creación de mapas de imagen en Adobe Acrobat o Adobe InDesign creating-image-maps-in-adobe-acrobat-or-adobe-indesign

Puede crear mapas de imagen mientras diseña su catálogo electrónico en Adobe Acrobat o en Adobe InDesign.

En Adobe Acrobat o Adobe InDesign, cree referencias de hipervínculo donde desee que aparezcan los mapas de imágenes y especifique las ubicaciones URL para el mapa de imagen. Al seleccionar la opción Extraer vínculos al cargar el archivo del PDF en Adobe Dynamic Media Classic, se convierten automáticamente los vínculos a mapas de imágenes.

Para obtener más información, consulte Ayuda de Adobe InDesign o Ayuda de Adobe Acrobat.

Para crear mapas de imagen en Adobe InDesign to-create-image-maps-in-adobe-indesign

  1. En Adobe InDesign, vaya a Windows® > Interactivo > Hipervínculos.

  2. En el panel Hipervínculos, seleccione el texto, el marco o el gráfico que desea convertir en un mapa de imagen.

  3. Seleccionar Nuevo hipervínculo en el menú del panel.

  4. En el cuadro de diálogo Nuevo hipervínculo, en la Vincular a menú, elija URL.

  5. Escriba o pegue el ID de producto en el cuadro URL.

  6. Seleccionar OK. (Adobe Dynamic Media Classic completa la dirección URL con la plantilla URL del mapa de imagen).

    note note
    NOTE
    No es necesario establecer las opciones de apariencia en Adobe InDesign. Puede especificar el aspecto en Adobe Dynamic Media Classic.

  7. Repita los pasos 2 a 6 para todos los mapas de imágenes que desee crear.

  8. Exporte el archivo como PDF.

  9. Cargue el PDF en Adobe Dynamic Media Classic.

  10. Entrada Opciones del PDF, seleccione Extraer vínculos.

Para crear mapas de imagen en Adobe Acrobat to-create-image-maps-in-adobe-acrobat

  1. En Adobe Acrobat, vaya a Herramientas > Edición avanzada > Herramienta Vínculo.
  2. Arrastre para crear el mapa de imagen.
  3. En el cuadro Crear vínculo, seleccione Vínculo personalizado y seleccione Siguiente.
NOTE
No es necesario establecer las opciones de apariencia en Adobe Acrobat. Puede especificar el aspecto en Adobe Dynamic Media Classic.
  1. En el cuadro Propiedades del vínculo, seleccione Acciones.
  2. Seleccionar Abrir Un Vínculo Web en el menú Seleccionar acción y, a continuación, seleccione Añadir.
  3. Escriba el ID del producto para el mapa de imagen en el cuadro Editar URL y seleccione OK. (Adobe Dynamic Media Classic completa la dirección URL con la plantilla URL de mapa de imagen).
  4. Repita los pasos 1 a 7 para todos los mapas de imágenes que desee crear.
  5. Guarde el archivo.
  6. Cargue el PDF en Adobe Dynamic Media Classic y seleccione Extraer vínculos en las opciones del PDF.
recommendation-more-help
ba789e76-bace-4e0e-bd26-52691fb2cb26