Sintaxis declarativa del control de servidor Web ImageMap

Actualización: noviembre 2007

Crea un control que muestra una imagen en una página. Cuando se hace clic en un área de la zona activa definida dentro del control ImageMap, el control genera una devolución de datos al servidor o navega a una dirección URL especificada.

<asp:ImageMap
    AccessKey="string"
    AlternateText="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DescriptionUrl="uri"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    ForeColor="color name|#dddddd"
    GenerateEmptyAlternateText="True|False"
    Height="size"
    HotSpotMode="NotSet|Navigate|PostBack|Inactive"
    ID="string"
    ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom|
        AbsBottom|AbsMiddle|TextTop"
    ImageUrl="uri"
    OnClick="Click event handler"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    runat="server"
    SkinID="string"
    Style="string"
    TabIndex="integer"
    Target="string"
    ToolTip="string"
    Visible="True|False"
    Width="size"
>
            <asp:CircleHotSpot
                AccessKey="string"
                AlternateText="string"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                href="uri"
                PostBackValue="string"
                Radius="integer"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
                X="integer"
                Y="integer"
            />
            <asp:PolygonHotSpot
                AccessKey="string"
                AlternateText="string"
                Coordinates="string"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                href="uri"
                PostBackValue="string"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
            />
            <asp:RectangleHotSpot
                AccessKey="string"
                AlternateText="string"
                Bottom="integer"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                Left="integer"
                href="uri"
                PostBackValue="string"
                Right="integer"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
                Top="integer"
            />
</asp:ImageMap>

Comentarios

Utilice el control ImageMap para crear una imagen que contiene áreas de la zona activa definidas. Cuando un usuario hace clic en un área de la zona activa, el control puede generar una devolución de datos al servidor o navegar a la dirección URL especificada.

Para obtener más información sobre cómo usar el control ImageMap, vea Información general sobre ImageMap (Control de servidor Web).

El control Image puede ser una buena alternativa si sólo necesita capturar las coordenadas donde el usuario hizo clic y no necesita las capacidades del área de la zona activa.

Ejemplo

El siguiente ejemplo de código muestra cómo crear un control ImageMap de forma declarativa que contiene dos objetos CircleHotSpot. La propiedad HotSpot.HotSpotMode está establecida en HotSpotMode.Navigate, lo que hace que la página navegue a la dirección URL especificada cada vez que un usuario haga clic en una de las áreas de la zona activa circular. Para que este ejemplo funcione correctamente, debe suministrar su propia imagen para la propiedad ImageUrl y actualizar adecuadamente la ruta de acceso hasta la imagen para que la aplicación pueda localizarla.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="form1" runat="server">

      <h3>ImageMap Class Navigate Example</h3>

      <h4>Shopping Choices:</h4>

       <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        alternatetext="Shopping choices" 
        runat="Server">    

        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="145"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">           
        </asp:circlehotspot> 

        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="145"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     

      </asp:imagemap>                 

    </form>      
  </body>
</html>
<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="form1" runat="server">

      <h3>ImageMap Class Navigate Example</h3>

      <h4>Shopping Choices:</h4>

      <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        width="150" 
        height="360"
        alternatetext="Shopping choices" 
        runat="Server">    

        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="75"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">           
        </asp:circlehotspot> 

        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="75"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     

      </asp:imagemap>                 

    </form>      
  </body>
</html>

Vea también

Conceptos

Información general sobre ImageMap (Control de servidor Web)

Referencia

ImageMap