Cómo: Determinar las coordenadas de un control ImageButton de servidor Web

Actualización: noviembre 2007

Cuando los usuarios hacen clic en un control ImageButton, se transfiere un parámetro al controlador del evento Click del control que incluye las coordenadas que indican dónde hizo clic el usuario. Esto le permitirá ejecutar diferentes tareas basándose en dónde hizo clic el usuario.

Nota:
Si desea definir áreas específicas de una imagen como zonas en las que los usuarios puedan hacer clic, también puede utilizar el control ImageMap.

La información de coordenadas se envía como parte del objeto argumento del evento Click del control ImageButton.

Para determinar las coordenadas en las que hace clic un usuario

1. Cree un controlador de eventos para el evento Click del control ImageButton. El objeto argumento del evento en el método debe ser de tipo ImageClickEventArgs.

2. En el controlador del evento Click, obtenga las propiedades X e Y del objeto argumento ImageClickEventArgs.

   Las coordenadas x e y se expresan en píxeles, siendo la esquina superior izquierda de la imagen (0,0).

   El ejemplo siguiente muestra cómo se puede determinar dónde hizo clic el usuario en un gráfico de 100 por 100 píxeles. El código obtiene las coordenadas "x" e "y" del lugar en el que el usuario hizo clic. A continuación, las compara con valores predeterminados para ver si el usuario hizo clic en un cuadrante en particular. Los resultados se muestran en un control Label.

   Protected Sub ImageButton1_Click(ByVal sender As System.Object, _
         ByVal e As System.Web.UI.ImageClickEventArgs) _
         Handles ImageButton1.Click
      Dim msg as String = ""
      Dim x As Integer = e.X
      Dim y As Integer = e.Y
   
      ' The button graphic is assumed to be 100x100 pixels.
      ' This checks coordinates against predetermined values that
      ' make up quadrants of the picture.
      If x >= 50 And y >= 50 Then
         msg = "Southeast"
      ElseIf x >= 50 And y < 50 Then
         msg = "Northeast"
      ElseIf x < 50 And y >= 50 Then
         msg = "Southwest"
      ElseIf x < 50 And y < 50 Then
         msg = "Northwest"
      End If
      Label1.Text = msg
   End Sub
   

   protected void ImageButton1_Click(object sender, 
       System.Web.UI.ImageClickEventArgs e)
   {
       string msg = "";   
       int x = e.X;   
       int y = e.Y;   
   
       // The button graphic is assumed to be 100x100 pixels.
       // This checks coordinates against predetermined values that
       // make up quadrants of the picture.
       if(x >= 50 && y >= 50)
       {
           msg = "Southeast";
       }
       else if(x >=50 && y < 50)
       {
            msg = "Northeast";
       }
       else if(x < 50 && y >= 50)
       {
           msg = "Southwest";
       }
       else if(x < 50 && y < 50)
       {
           msg = "Northwest";
       }
       Label1.Text = msg;
   }
   

Vea también

Referencia

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