ImageMap (control)

  • Artículo

El control ImageMap ASP.NET le permite crear una imagen con áreas individuales en las que los usuarios pueden hacer clic, denominadas zonas activas. Cada una de estas zonas activas puede ser un hipervínculo independiente o un evento de devolución de datos.

Para agregar un control ImageMap a una página

  1. Arrastre el control ImageMap del panel Cuadro de herramientas a la página.

  2. Establecer propiedades que determinen la apariencia y el comportamiento del control ImageMap, use el panel Propiedades de etiqueta.

Para obtener una descripción completa de todas las propiedades del control ImageMap, vea ImageMap (Propiedades) en MSDN Library.

Elementos de ImageMap

El control ImageMap está formado principalmente por dos elementos. El primero es una imagen, que puede ser un gráfico en cualquier formato gráfico web estándar, como un archivo .gif, .jpg o .png.

El segundo elemento es una colección de controles de zona activa. Cada uno de estos controles es un elemento diferente. Por cada control de zona activa, defina su forma (un círculo, un rectángulo o un polígono) y las coordenadas que especifican la ubicación y el tamaño de la zona activa. Por ejemplo, si crea una zona activa circular, defina las coordenadas X e Y del centro y del radio del círculo.

Puede definir tantas zonas activas para la imagen como sea necesario. No necesita definir zonas activas para que se cubra todo el gráfico.

[!NOTA]

Puede definir zonas activas superpuestas. Cada zona activa tiene un valor de índice Z y, si un usuario hace clic en un área definida por dos o más zonas activas superpuestas, la zona activa con el orden Z superior es la zona activa seleccionada.

Para definir las zonas activas de un control ImageMap

  1. En la Vista de diseño, haga clic con el botón secundario en el control ImageMap y haga clic en Propiedades, el menú contextual.

  2. Haga clic en el botón de puntos suspensivos Cc295596.0b8d1f68-5b69-4cd1-b928-5f7bc2a6c4dc(ES-ES,Expression.30).gif, situado junto a la propiedad HotSpots, para abrir el cuadro de diálogo Editorde la colecciónHotSpot.

  3. Haga clic en la flecha del lado derecho del botón Agregar y, a continuación, en el tipo de zona activa que desea agregar: CircleHotSpot, RectangleHotSpot o PolygonHotSpot.

  4. En el área Propiedades, establezca las propiedades de la zona activa.

Dibujar zonas activas gráficamente

No se pueden dibujar gráficamente las zonas activas de forma directa para un control ImageMap ASP.NET, pero se pueden utilizar las herramientas de zonas activas de Microsoft Expression Web para situar las zonas activas en el gráfico y después copiar y pegar esas coordenadas como propiedades en el cuadro de diálogo Editor de la colección HotSpot.

Para utilizar coordenadas dibujadas gráficamente en un control ImageMap

  1. Arrastre la imagen a la página en la Vista de diseño.

  2. Si la barra de herramientas Imágenes no está abierta, ábrala haciendo clic en Barras de herramientas del menú Ver y luego haciendo clic en Imágenes.

  3. Haga clic en el botón Zona activa en forma de polígono, Zona activa circular o Zona activarectangular y dibuje la zona activa en la imagen. Para obtener información detallada, vea Agregar o modificar una zona activa.

  4. En la vista Código, copie las coordenadas de la zona activa.

  5. Haga clic con el botón secundario en el control ImageMap y haga clic en Propiedades.

  6. Haga clic en el botón de puntos suspensivos situado junto a la propiedad HotSpots para abrir el cuadro de diálogo Editor de la colecciónHotSpot.

  7. Seleccione la zona activa en el área Miembros.

  8. Pegue los valores de las coordenadas en los espacios de propiedades correspondientes del área Propiedades.

Por ejemplo, si dibuja una zona activa circular y una en forma de polígono triangular en una imagen, verá código similar al que se muestra a continuación en la vista Código:

<area href="page.htm" shape="circle" coords="177,197,84" 
<area href="page.htm" shape="polygon" coords="392,113,466,252,310,252" />

Puede copiar los valores "coords" del círculo y aplicárselos a las propiedades de una zona activa CircleHotSpot. El primer número, 177, especifica la propiedad X. El segundo número, 197, especifica la propiedad Y, y el tercer número, 84, especifica la propiedad Radius.

De manera similar, puede copiar los valores "coords" del polígono directamente en la propiedad Coordinates de una zona activa PolygonHotSpot: 392,113,466,252,310,252.

Descripción

Puede especificar lo que sucederá cuando un usuario haga clic en una zona activa de un control ImageMap. Cada zona activa se puede configurar como un hipervínculo a una dirección URL proporcionada para esa zona activa. O bien, puede configurar el control para que se realice una devolución de datos cuando un usuario haga clic en una zona activa, proporcionando un valor único para cada zona activa. La devolución de datos genera el evento Click del control ImageMap. En el controlador de eventos, puede leer el valor único asignado a cada zona activa. Para obtener información detallada acerca de cómo responder a los clics del usuario en un control ImageMap, vea el artículo Cómo: Responder cuando el usuario hace clic en controles ImageMap de servidor Web en MSDN Library.