Colabora: Area Rectangular HTML by Ciberwalter

Area Rectangular en HTML
by Ciberwalter

Fecha: 23/Ene/2004 (22 de Enero del 2004)
Autor: Walter Martï¿½nez O.
[email protected]
http://www.geocities.com/gnivel4

Este Ejemplo te permite crear Areas Rectangulares para usarse como un Vï¿½nculo, (los conocidos "Area Map Rect"), los cuales pueden ubicarse en cualquier regiï¿½n de una imagen determinada.
La gran alternativa que posee, es que se puede agrandar o achicar desde los cuadros que se encuentran en los extremos. para hacernos una idea de cï¿½mo se verï¿½a este Vï¿½nculo, Haz Click en los ojos del Personaje, (la imagen muestra el programa en sï¿½).

A continuaciï¿½n sigue cï¿½digo en Visual Basic (Sï¿½lo detallarï¿½ lo mas importante):

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

    Create.Enabled = True

''' Hacemos los cuadros de las esquinas invisibles

    IzUp.Visible = False
    DerUp.Visible = False
    IzDown.Visible = False
    DerDown.Visible = False

    shCapture.Visible = True
    shCapture.Left = X
    shCapture.Top = Y
    shCapture.Height = 0
    shCapture.Width = 0

    miStartX = X
    miStartY = Y
''' Dejamos el valor Operacion como Verdadero para
''' que pueda realizarse el cuadro
    Operacion = True
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Operacion = True Then

''' A Medida que el cursor se mueve, crea el cuadro en el Formulario

shCapture.Left = -miStartX * (X > miStartX) - X * (X <= miStartX)
shCapture.Top = -miStartY * (Y > miStartY) - Y * (Y <= miStartY)
shCapture.Width = Abs(miStartX - X)
shCapture.Height = Abs(miStartY - Y)
End If
End Sub

Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)

    Operacion = False

''' Al Soltar el cursor establece el cuadro y coloca
''' los modificadores en las cuatro esquinas.

    IzUp.Visible = True
    IzUp.Left = shCapture.Left - IzUp.Width
    IzUp.Top = shCapture.Top - IzUp.Height

    DerDown.Visible = True
    DerDown.Left = shCapture.Left + shCapture.Width
    DerDown.Top = shCapture.Top + shCapture.Height

    IzDown.Visible = True
    IzDown.Left = shCapture.Left - IzDown.Height
    IzDown.Top = shCapture.Top + shCapture.Height

    DerUp.Visible = True
    DerUp.Left = shCapture.Left + shCapture.Width
    DerUp.Top = shCapture.Top - DerUp.Height

''''''''''''''''''''''''''''''''''''''''''''''''''''''
'' COORDENADAS
''' Primero lleva la escala al Valor de "Pixeles" (3) para poder
''' realizar las coordenadas
   Form1.ScaleMode = 3
''' establece las coordenadas en los TextBox
   Text1 = shCapture.Left
   Text5 = shCapture.Top
   Text2 = shCapture.Left + shCapture.Width
   Text6 = shCapture.Top
   Text3 = shCapture.Left
   Text7 = shCapture.Top + shCapture.Height
   Text4 = shCapture.Left + shCapture.Width
   Text8 = shCapture.Top + shCapture.Height
''' y devuelve la escala al valor "Twip" (1) para que no haya conflicto
''' con los modificadores.
Form1.ScaleMode = 1

End Sub

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
''' Funciones Agrandar Cuadro de Selecciï¿½n '''
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Private Sub IzUp_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
   OperacionIzUp = True
End Sub

''' Para Usar los modificadores, debemos Asignar una sentencia
''' especï¿½fica a cada modificador, para que sus equivalentes
''' se muevan junto con ï¿½l
''' este es el modificador del lado Izquierdo-Arriba
Private Sub IzUp_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

On Error GoTo SaltoIzUp

If OperacionIzUp = True Then
      IzUp.Left = IzUp.Left + X
      IzUp.Top = IzUp.Top + Y
      IzDown.Left = IzDown.Left + X ' junto con el se mueve el Izquiedo-Abajo
      DerUp.Top = DerUp.Top + Y     ' y el Derecho-Arriba
'''''''''''''''''''''''''''''''''''''''''''''
''' Y Ademï¿½s modifica el tamaï¿½o y la posiciï¿½n del cuadro
      shCapture.Top = IzUp.Top + IzUp.Height
      shCapture.Left = IzUp.Left + IzUp.Width
      shCapture.Height = IzDown.Top - (IzUp.Top + IzUp.Height)
      shCapture.Width = DerUp.Left - (IzUp.Left + IzUp.Width)
'''''''''''''''''''''''''''''''''''''''''''''

''''''''''''''''''''''''''''''''''''''''''''''''''''''
'' COORDENADAS
'' Otra vez cambia el modo a pixeles y crea las coordenadas.
    Form1.ScaleMode = 3

    Text1 = shCapture.Left
    Text5 = shCapture.Top
    Text2 = shCapture.Left + shCapture.Width
    Text6 = shCapture.Top
    Text3 = shCapture.Left
    Text7 = shCapture.Top + shCapture.Height
    Text4 = shCapture.Left + shCapture.Width
    Text8 = shCapture.Top + shCapture.Height

    Form1.ScaleMode = 1
End If

Exit Sub
'' este escape funciona cuando tratas de achicar tanto el cuadro,
'' que se invierte y provoca una resta incoherente, produciendo un error
'' SI NO ME CREES BORRA LA OPCION "ON ERROR GOTO SaltoIzUp" para que veas
    SaltoIzUp:
        OperacionIzUp = False
End Sub

Al momento de abrir el programa, podrï¿½as incluir un botï¿½n para cambiar la imagen (por ejemplo).

Su utilizaciï¿½n es muy fï¿½cil: sï¿½lo abres una imagen especï¿½fica y dibujas un cuadrado en el Area que deseas, luego lo dimensionas a tu gusto, completas los casilleros "Imagen" y "HiperVinculo" segï¿½n tus opciones y pulsas el botï¿½n "Generar Cï¿½digo". Luego copias el cï¿½digo que te entrega y lo pegas en una pï¿½gina web (*.htm) si sabes programar en HTML te serï¿½ muy Fï¿½CIL.

Descarga el Fichero con el Cï¿½digo de ejemplo y el Ejecutable ("Ciberwalter_AreaRect.zip" - Tamaï¿½o 77.5 KB)