Accessibility

Fireworks TechNote

¿Cómo mantener el estado Sobre para los desencadenantes de menú emergente en Fireworks MX

Introducción

El desencadenante de los menús emergentes suele ser una imagen intercambiada (o imagen de rollover) cuyo aspecto se altera cuando el visitante desplaza el ratón por ella y activa el menú emergente. La configuración predeterminada de un desencadenante de imagen intercambiada consiste en que el estado normal de la imagen quede restaurado cuando el visitante aparta el ratón de ella, aunque esté encima de los menús emergentes.

Algunos desarrolladores prefieren que la imagen intercambiada permanezca en el estado Sobre cuando el puntero del ratón pasa sobre el menú emergente activado. Este tipo de configuración puede actuar para el visitante como recordatorio visual de que el menú emergente activado es un subconjunto de elementos del objeto que actúa como desencadenante.

Esta implementación se puede conseguir modificando el código generado por Fireworks MX. En esta nota técnica se describen los cambios de código necesarios. Esta implementación se trata para Fireworks 4 en How to retain the button over state while scrolling over a Pop-up Menu (Cómo mantener el estado Sobre del botón al desplazarse sobre un menú emergente) (nota técnica 15926) *. Aunque los pasos necesarios para llevar esto a cabo usando código de Fireworks MX son prácticamente iguales, existen algunas diferencias. Los usuarios deberán consultar la nota técnica correspondiente a su versión de Fireworks.

Requisitos previos

Para utilizar y comprender esta nota técnica, se requieren conocimientos de usuario de los conceptos siguientes y se presupone que se utilizan Fireworks MX y Dreamweaver MX para crear archivos y trabajar con ellos.

  • Debe estar familiarizado con los menús emergentes de Fireworks. Para ver los vínculos de los artículos y las notas técnicas pertinentes, consulte la sección Información adicional.
  • Debe estar familiarizado con HTML y JavaScript, y poder utilizar con facilidad la vista de código de Dreamweaver. Consulte la sección "Configuración del entorno de codificación" del sistema de Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver) para obtener una información completa sobre cómo trabajar en la vista de código.
  • Debe tener un sitio definido en Dreamweaver. Véase How to define a site in Dreamweaver (Cómo definir un sitio con Dreamweaver) (nota técnica 14028) *. Para ver los vínculos a tutoriales y notas técnicas que describen cómo exportar menús emergentes y utilizarlos en Dreamweaver MX, consulte la sección Información adicional.

Nota: el Soporte técnico de Macromedia no se responsabiliza del uso no adecuado de código HTML y JavaScript debido a una aplicación incorrecta de esta nota técnica, y no ofrece soporte para los problemas derivados de ello.

Instrucciones para la modificación del código

Instrucciones para la modificación del código

Paso 1 (en Fireworks MX): Creación y exportación de un menú emergente a un sitio de Dreamweaver

  1. Cree en Fireworks MX un archivo con un menú emergente.

    Las instrucciones de esta nota técnica sólo sirven para archivos que generen comportamientos de imagen intercambiada. Por lo tanto, el elemento desencadenante debe ser un botón de dos estados, una división con un comportamiento Rollover simple o una división con un comportamiento Intercambiar imagen.

    Nota: consulte la sección Información adicional de esta nota técnica para obtener vínculos a tutoriales y notas técnicas que describen cómo crear menús emergentes en Fireworks MX.

  2. Exporte el código HTML y las imágenes a un sitio de Dreamweaver definido.

    En el cuadro de diálogo Exportar, indique HTML e imágenes en Guardar como tipo. La exportación de un menú emergente también generará un archivo mm_menu.js, que se personalizará con la presente nota técnica.

    Nota: las instrucciones de esta nota técnica requieren que se seleccione Dreamweaver en Estilo de HTML. Para ello, seleccione Archivo > Configuración de HTML y, a continuación, HTML de Dreamweaver.

Paso 2 (en Dreamweaver MX): Configuración del entorno de Dreamweaver

  1. Abra el sitio al que haya exportado el código HTML de Fireworks. Para ello, seleccione Sitio > Editar sitios, elija el nombre del sitio y haga clic en Listo.
  2. En el panel Sitio, busque y abra el archivo HTML exportado de Fireworks y el archivo mm_menu.js. El archivo JavaScript se abrirá en la vista de código, aunque es probable que el archivo HTML se abra en la vista de diseño.
  3. Cambie al archivo HTML y seleccione Vista > Vista de código para cambiar a la vista de código.
  4. Si los números de líneas no están activados, seleccione Vista > Opciones de vista de Código > Números de líneas para activarlos.

Paso 3: Modificación del código en los archivos HTML y JavaScript de Fireworks

  1. En el archivo HTML, busque function MM_swapImgRestore. Esta línea de código se encontrará en el encabezado. Si lo desea, puede utilizar Buscar y reemplazar para encontrarla. La imagen siguiente también le ayudará a encontrarla.

    Nota: esta función específica se utiliza junto con el comportamiento Intercambiar imagen y Fireworks la agrega automáticamente.

  1. Seleccione las líneas de texto para la función seleccionando el código que empieza con "function MM_swapImgRestore" y acaba con " } ", tal como se muestra en las líneas de la 19 a la 21 de la imagen anterior.

  2. Seleccione Edición > Cortar como preparación para desplazar esta función al archivo JavaScript.

    Nota: el hecho de cortar la función del archivo HTML afectará a todos los rollovers del archivo HTML. Si tiene rollovers que no son desencadenantes de menús emergentes y desea que sigan funcionando normalmente, seleccione Edición > Copiar y siga las instrucciones alternativas que aparezcan.

  3. En el archivo mm_menu.js, pegue el código al principio del código JavaScript. El código del archivo mm_menu.js debería tener un aspecto similar al de la imagen siguiente. Tenga en cuenta que la función se pega inmediatamente debajo de los comentarios de JavaScript.

  1. Alternativa: si ha copiado el código en el paso 3 porque desea que algunos rollovers mantengan la función de restauración, agregue un "1" al nombre de la función para diferenciarlo de la original. Así, el nombre de la función que acaba de pegar en el archivo JavaScript tendrá el aspecto siguiente:

    function MM_swapImgRestore1()

  2. Cambie el archivo HTML. Seleccione y copie el código siguiente:

    mm_menu_$.restoreParam = 'restore_img.gif'

    Nota: se debe utilizar "restore_img.gif", no un nombre de imagen real.

  3. Pegue el código anterior en el documento HTML debajo del último elemento de menú de la función mmLoadMenus.

    La ubicación correcta del código es una línea después de la última entrada de menú y dos líneas antes de la entrada "mm_menu_##########_#.writeMenus()" (el símbolo "#" representa cada dígito del número exclusivo utilizado para cada menú principal).

    Cada entrada de menú emergente empieza con mm_menu_##########_#.addMenuItem y termina con mm_menu_##########_#.bgColor o mm_menu_##########_#.childMenuIcon="images/arrows.gif" (si el menú emergente contiene submenús). Consulte la ilustración que aparece después del paso 7.

  4. Como ya hemos dicho, se hace referencia a cada menú principal mediante un número de 10 dígitos exclusivo (seguido de un guión bajo y otro dígito). Sustituya el símbolo de dólar ($) en el código pegado por el número de diez dígitos seguido de un guión bajo y un número de un solo dígito para cada uno de los menús principales. Puede copiar estos números desde las entradas de menú principal de la función mmLoadMenus. En el ejemplo siguiente, la combinación de números resaltados en color dorado es el número de referencia del menú principal.

    En la captura de pantalla siguiente se ha pegado una línea de código restoreParam para cada menú principal y se ha sustituido el símbolo de dólar por los números de referencia de los menús principales. En este caso hay cinco menús principales, y los números que aparecen después de cada mm_menu_ son los números del menú raíz correspondiente.

  1. Cambie a la vista de diseño (Vista > Diseño) y abra el panel Comportamientos (Ventana > Comportamientos).

  2. Busque todos los elementos desencadenantes de la página. Cada elemento desencadenante tendrá al menos cuatro comportamientos: Intercambiar imagen, Restaurar imagen intercambiada, Mostrar menú emergente y Ocultar menú emergente. Seleccione el comportamiento Restaurar imagen intercambiada y quítelo haciendo clic en el botón Eliminar del panel Comportamientos (el botón con un signo de menos). Repita la operación para cada elemento que tenga un comportamiento Intercambiar imagen. <img src="/support/local_data/localized_tn/fireworks/mx_dont_restore/

    Alternativa: quite el comportamiento Restaurar imagen intercambiada sólo de los elementos que actúen como desencadenantes de menús emergentes.

    En la imagen siguiente se muestra el código real que se quita con esta operación. Tenga en cuenta que está borrando la llamada a la función MM_swapImgRestore, pero debe conservar la acción onMouseOut porque se utiliza junto con la función MM_startTimeout.

  1. Guarde el archivo HTML y cambie al archivo mm_menu.js. En el archivo JavaScript, busque la función "hideActiveMenus". Se encontrará entre las líneas 730 y 740.

  2. Seleccione y copie el código siguiente: 

    MM_swapImgRestore( activeMenus[i].Menu.restoreParam);
  3. Péguelo en la ubicación que se indica en la imagen siguiente.

  1. Alternativa: puesto que sólo deben utilizar esta función los rollovers que desencadenan menús emergentes, agregue un "1" a la llamada de función para que corresponda a la función pegada anteriormente en el archivo mm_menu.js:
  2. Guarde los cambios realizados en el archivo mm_menu.js. Pruebe el menú emergente en el navegador. Consulte el Ejemplo 1 para ver un ejemplo práctico de un menú con "desencadenantes pegados".

Solución de problemas

Si sigue los pasos de la presente nota técnica, el comportamiento de los botones será el esperado. Los errores de sintaxis tienen una mayor importancia en JavaScript que en HTML. Si agrega al código un espacio que sobre, éste se romperá. Lo mismo ocurre con la ubicación del código. La ubicación correcta del código JavaScript es importante porque se lee en orden secuencial. Si no se pasa la información en el orden adecuado, se producirán errores o resultados inesperados.

Información adicional

Para obtener más información sobre la adición de comportamientos u otras formas de personalizar los menús emergentes, consulte las notas técnicas que se indican a continuación.

Última actualización: 2 de octubre de 2002
Fecha de creación: 11 de septiembre de 2002
ID: 16565
Producto: Fireworks
Versiones: MX
SO: todos
Navegador: N/A
Servidor: N/A
Base de datos: N/A
ID anterior: N/A